YAGITCHE » デザイン http://yagi.tc 文章を書くことが好きなyagitchの文章実験場です。ネタ文章とか読書メモとかイベントレポートとか。 Wed, 18 Apr 2012 13:06:23 +0000 ja hourly 1 http://wordpress.org/?v=3.2.1 古巣のリニューアルによせて http://yagi.tc/archives/2011/12/30/tsukunavi-renewal/ http://yagi.tc/archives/2011/12/30/tsukunavi-renewal/#comments Fri, 30 Dec 2011 03:06:50 +0000 yagitch http://yagi.tc/?p=1600 私が学生時代に運営していたウェブサイトがもうすぐリニューアルするらしい。
http://www.tsukunavi.com/
（※現在はリニューアル予定日の1/1へのカウントダウンが表示されている）

ツクナビ 20111214時点のキャプチャ
(2011/12/14時点のキャプチャ)

現行のデザインを作った者としては、それがスクラップされるというのはとても嬉しく、そして少しだけ寂しい。

作ったといっても、当時デザインリニューアルしようというただの言い出しっぺになっただけだ。その延長でプロジェクトメンバを募ってコンセプトデザインをまとめ、ウェブデザインに優れた先輩に原案(Illustratorで作ってもらった)を考えてもらい、それを自分なりにチューニングしてコードに落とし込んだ、というのが実情である。基本構造は当時のプロジェクトメンバの議論の成果だし、この「ツクナビらしさ」のデザインの基礎は先輩が作ったものだ。

しかしリニューアルに至るまで数ヶ月間はこうした画面配置とにらめっこをしていたようなものなので、誰よりもこのデザインに思い入れが深いということは主張しておきたい。

このデザインができたのは私が大学2年か3年かの夏だから、7年ぐらい前のことだ。
ウェブの世界で7年と言えば遠い昔だ。当時はTwitterやFacebookといったSNSもなかったし（スタート間もないmixiの存在を知ったのはこの仲間たちからだ）、Amazon.co.jpやYahoo! Japanも野暮ったいデザインだったし、学生がウェブで集まる場所といえば2ちゃんねるだった。

ウェブ技術的にはJavascriptが嫌われ、HTMLはXMLに統合されると言われていた。テーブルタグを使った固定HTMLが全盛で、(Movable Typeはクールな存在だった)、ブラウザと言えばIE6で(Firefox 0.8とかOpera 7.5は超マイナー)、主要ウェブサイトはURLに携帯電話向けサイトのためのサブディレクトリ(/iとか/j、/ezなど)を用意していた。スマートフォンなんて日本上陸してなかったし、Photoshop派とFireworks派がいたし、アフィリエイトはまだ普及してなくてウェブ広告と言えばクリック報酬型のバナー広告だし、ライブドアといえば無料プロバイダだし、ネットランナーはWinnyの特集をやっていたし、無料メールマガジンはまだ影響力を持っていた。すべて遠い昔の話だ。

現行のデザインはそんな時代に合わせてデザインされた。
テーブルタグを廃したデザインとか、外部スタイルシートを使うとか、横幅800pxに収まるとか(当時の解像度は1024×768が主流)、FirefoxやOperaでも表示が崩れないとか、透過PNGを使うとか、W3Cのテストに通るようなデザインというのは当時としては画期的だった。

そんな今や時代に取り残されたようなデザインを、現代に合わせて今回新しくしようということになったのは素晴らしい。

何よりも、自分たちのいた場所が、7年経ってもこうして残っているのは素敵なことだと思う。
これからどう変わっていくのかを見るのが楽しみだ。

]]> http://yagi.tc/archives/2011/12/30/tsukunavi-renewal/feed/ 3 意味なく架空のタイトルロゴを作ってしまうテスト http://yagi.tc/archives/2006/03/06/369/ http://yagi.tc/archives/2006/03/06/369/#comments Sun, 05 Mar 2006 17:08:37 +0000 yagitch http://labs.yagi.tc/sp/?p=369 続くかもしれない企画。グラフィックソフトを駆使して素人が架空のロゴを作ってみよう実験。今回はエロゲと関係ないものをエロゲ風にアレンジしてみました。

男はつらいよ 寅次郎あじさいの恋

まずは名作映画のタイトルをろりぷに系ロゴに。

ポップ体フォント、鮮やかな色遣い、そしてCG背景の3点を押さえるとそれっぽく見えます。

（この背景画像の版権著作権については微妙なので権利関係を確認できなければ削除／差し替えします）

こうですか？ わかりません！

次は２ちゃんねる用語をファンタジー系ロゴに。

全体的にグラデーションを多用するとそれっぽく見えます。シンプルなのはいいんですが安っぽく見えないようにするのが難しいようです。

トリビアの泉 ～素晴らしきムダ知�～

続いてテレビ番組タイトルを陵辱系ロゴに。

完成してから思ったのですが血しぶきが出た時点で陵辱系じゃなくてホラー系ですね。右上にある映倫もどきのマークはもちろん架空のものです。

生協の白石さん

そしてベストセラータイトルを伝奇系ロゴに。

上の画像と色遣いが似ていますがこちらのほうがミステリーチック。左側の英文は「吾輩は猫である」の英訳。ますますエロゲと関係ありません。

National ～大切なお知らせとお願い～

最後に時事ネタを感動系ロゴに。

素人には難しすぎました。グラデーションや透過、アピアランスといった初級者重宝のテクニックだけでは再現は無理です。CGを入れるか、CGを使わないなら相当なセンスが必要になるのか。

制作時間は1枚あたり1時間～2時間。描きためようとすると1週間くらいかかりますな。素人が挑戦するとこんなレベルになるということで、ソフトハウスの中の人には敬意を感じます。

]]> http://yagi.tc/archives/2006/03/06/369/feed/ 1 バーコード時計、デザイン電話機など http://yagi.tc/archives/2005/07/27/285/ http://yagi.tc/archives/2005/07/27/285/#comments Tue, 26 Jul 2005 17:23:44 +0000 yagitch http://labs.yagi.tc/sp/?p=285 amana :「伝える」から「伝わる」へ
画像制作会社のPRページ。静かな音楽とムービーが流れる時計のようなFLASH。

Bar Code Clock
バーコードで表示する時計。

デザイン電話機
ニューヨークの電話機事情。

WordPress Styles
WordPressテーマのデザインコンテスト。

ライトセイバー
スターウォーズのアレをFLASHで実現。やみつきになる。

]]> http://yagi.tc/archives/2005/07/27/285/feed/ 2 最近のメモ http://yagi.tc/archives/2005/05/25/230/ http://yagi.tc/archives/2005/05/25/230/#comments Wed, 25 May 2005 07:48:10 +0000 yagitch http://labs.yagi.tc/sp/?p=230 ローカルに残していたメモ書きやショートカットを大幅整理。デザイン関係のものをまとめてみた。

実用

色のみじん切り
普段から使っているWeb用の色見本帳。彩度別明度別から星形に並べた色見本のほかカラーチップやグラデーションツールなども分かりやすく装備されていてほぼ困ることはない。

WEB COLOR 216
色名で指定できる一覧表や、10進数での指定やRGB比率との一覧表が役に立つ。上のが希望の色を見るのに使いやすい「ツール」であるのに比べて、こちらは配色や配分や指定方法を知るのに使いやすい「解説」に近い。

I Like Your Colors!
URLを入力するとそのページで使われている色を抽出してくれるスクリプト。「ここで使われてる文字色が欲しい」とか思ったときにわざわざソースの中を探し回る必要が無くなる。

PhotoBox YAS – 印刷可能な無料高画質写真素材 -
美しい写真素材を無料で公開している。

MOVABLE Style
MovableTypeの表示スタイルのサンプルを公開している。が、まだ種類が少ない。

IEでもFirefoxでも崩れないレイアウト
IEと他のブラウザでの、widthやmarginの解釈の違いについて解説。

Web制作に役立つフリーソフト
2ちゃんねるの同名スレのまとめサイト。私はここでJmEditorを知った。

グッドデザイン

amaztype
キーワードにマッチしたamazon.comの本を“そのキーワードの形にして”並べるサイト。（↓例）　amazon.co.jpやamazon.co.ukの本も検索できる。ぜんぜん実用的じゃないけどこの馬鹿っぽさが好きだ。そしてこのインターフェイスの心地よさがいい。

amaztype

DependSpace
エロゲ関連情報サイト。全体的な統一感が美しい。

21WebSpider
デザインや文章など見る人にやさしくしながらクールなサイトを作る、ということを解説。デザインは全体的に出版物のセオリーをウェブに応用している感じ。数年前の一時期、このサイトを作るときに参考にしたこともあった。

]]> http://yagi.tc/archives/2005/05/25/230/feed/ 0 ボタン（バナー）を作ろう http://yagi.tc/archives/2005/04/24/200/ http://yagi.tc/archives/2005/04/24/200/#comments Sun, 24 Apr 2005 02:46:36 +0000 yagitch http://labs.yagi.tc/sp/?p=200 Button Maker
…ボタンメーカー（アルファベット限定）
Button Maker for Japanese
…ボタンメーカー（日本語対応）
Taylor McKnight //gtmcknight
…ボタン集
ColorMatch Remix
…色の調和をシミュレート補完

]]> http://yagi.tc/archives/2005/04/24/200/feed/ 0 KDDI風ロゴ http://yagi.tc/archives/2005/03/28/180/ http://yagi.tc/archives/2005/03/28/180/#comments Mon, 28 Mar 2005 14:54:15 +0000 yagitch http://labs.yagi.tc/sp/?p=180 logo

かっとなって作った。

KDDI logo

暇さえあれば鯖いじり中。だんだん病気みたいになってきた。

]]> http://yagi.tc/archives/2005/03/28/180/feed/ 0 参考にしたいデザインメモ http://yagi.tc/archives/2005/02/07/140/ http://yagi.tc/archives/2005/02/07/140/#comments Sun, 06 Feb 2005 16:45:08 +0000 yagitch http://labs.yagi.tc/sp/?p=140 たまったショートカットを整理。Google風デザイン、ヒラギノ使用のブログなど。

Nitram+Nunca
デザインとテキストの見せ方に凝っている。中身はMac情報。

oscarblog
テキスト全体にヒラギノフォント（明朝）を使用。少し試してみたが白バックに黒文字、しかも最小でもこのサイズでないとフォントがきれいに見えない。

東京電波
こちらはヒラギノ角ゴを使用。ゴシックでもここまで小さいと見にくいな。

Winny Archives
シンプルが美しさに直結している一例。

デイリーポータルZ on W.T.B.W.
デイリーポータルZの過去記事まとめサイト。Googleの検索結果風のデザイン。

Favicon Japan!! -ファビコンジャパン-
世界中の、お気に入り登録時などに表示されるアイコン（通称：favicon）が集められているサイト。

そうだ、京都、行こう
JR東海ミュージアム
いつ見ても癒されるなあ。

憧れのバンドのフォント
おお！

]]> http://yagi.tc/archives/2005/02/07/140/feed/ 0 Mac風アイコン http://yagi.tc/archives/2005/02/02/130/ http://yagi.tc/archives/2005/02/02/130/#comments Tue, 01 Feb 2005 17:54:25 +0000 yagitch http://labs.yagi.tc/sp/?p=130 emblem

仕事関係で見つけたのでメモ。

Aquaな感じのアイコンリンク集

Aquaな円形アイコン

デザインの好みがだんだんAppleな方に洗脳されているような気がする。
でも私は普段あまりMacintoshを使ってない。

]]> http://yagi.tc/archives/2005/02/02/130/feed/ 0 新春MTいじり http://yagi.tc/archives/2005/01/02/106/ http://yagi.tc/archives/2005/01/02/106/#comments Sat, 01 Jan 2005 15:34:18 +0000 yagitch http://labs.yagi.tc/sp/?p=106 元旦はすることもないので夕方からこのページのデザインをいじってました。ちっとはマシになったかな。

このあたりからよさげなサイトを探して参考にしたり。

参考にした主なサイト：
ZING BLOG ver.N
…メリハリのきいた色使い。写真とか増やそうかな。
創生地 日記
±Style+archi.com
■ designcafe ■
：：Coconeil
…この4つ、エントリごとのリンクの定型。
.3
…リンクの色はこのくらい淡いのがいい。
YUKI’S あーとわーくす
…全体の色使いはこれくらい淡いのがいい。
kabu to musi
…やはり文字色はグレーかシルバーがいいなあ。
WS:Blog
…3ペインもいいかなと思っている。

Webカラー辞典
…色を使うときはほとんどWebセーフカラーしか使いません。画像加工ソフトで色指定するときも、ブラウザに気を使う必要がないのにWebセーフカラーしか使ってません。慣れでしょうかね。

ところが先日Web制作の某T社社長から「UNIXカラーの方が再現性がええぞ」とか言われたのでそっちも使ってみようかと思います。

そういえば、普段液晶モニタを使っているんで帰省して実家のCRTを使っていると、てっきり真っ白な背景だと思っていたお気に入りサイトに実は薄い文字が入ってることに気づいて驚いたりしています。サブリミナル効果？

]]> http://yagi.tc/archives/2005/01/02/106/feed/ 0 Appleの新製品風にしてみるテスト http://yagi.tc/archives/2004/11/07/58/ http://yagi.tc/archives/2004/11/07/58/#comments Sun, 07 Nov 2004 14:49:21 +0000 yagitch http://labs.yagi.tc/sp/?p=58 premini

ふと思いついて作ってみた。これを応用して架空のAppleの新製品を作れるな。

フォントについての参考：
Appleの使うフォント
…以前はAppleGaramondを使っていたのが、現在はAppleMyriadに。
Appleのフォント
…日本版ではヒラギノ。
Appleのウェブサイトのフォント
…AppleMyriadはMyriad ProのSemiboldに同じ。日本版はヒラギノ角ゴPro。

]]> http://yagi.tc/archives/2004/11/07/58/feed/ 0 ブログ的なポータルデザイン http://yagi.tc/archives/2004/10/25/47/ http://yagi.tc/archives/2004/10/25/47/#comments Sun, 24 Oct 2004 19:25:09 +0000 yagitch http://labs.yagi.tc/sp/?p=47 めっつぉ
HuntingGirledCollective
blogポータル画面
（↑サイトではなくサンプル画像だが）

[気になったデザインなど]

solvalou.net
これぐらい“薄い”デザインを目指したい。

Nintendo iNSIDE
情報の並べ方が綺麗。

酸性
なにより写真が。

The Gate of Pessimist
OTONA Times
右側のバナーがMacぽくて目を引く。

]]> http://yagi.tc/archives/2004/10/25/47/feed/ 0 今はわりと反省している http://yagi.tc/archives/2004/10/11/29/ http://yagi.tc/archives/2004/10/11/29/#comments Mon, 11 Oct 2004 07:24:10 +0000 yagitch http://labs.yagi.tc/sp/?p=29 「CSSでイケてるデザインサイトリンク集」なるものを見つけたので5時間ほどかけて数百サイトを回ってみた。目に付いたものをピックアップ。

＜CSSでイケてるデザインサイトリンク集＞
Delta
BrainJar.com
Circle Pasta
eXDefender
lojjic.net
2nd New House
上々姉妹!
Business Architects Inc.
Harmonate Town
css/edge
CAFEDESSIN

＜CSSでイケてるデザインサイトリンク集2＞
Mini Sapphire
トミタアトリエ
グランド・ウェブ！
京都西陣町家スタジオ
mew
Junkline
日本ホメオパシー振興会
COULD
Chitatopops
NPO 木野環境
yukiakari
xxxddk.solstia.net
RiT-LiX
Fuckin’ Kingdom
POKeDEX 250
CLAMP EXPRESS
Mr. Greenhorn
W3C :: remix
clagnut
Cinnamon Interactive
mezzoblue
CSS Vault
Message Web Design
Re:d Design
SimpleBits
Stopdesign

むしゃくしゃしてやった。我ながらアホなことをしたと思っている。

参考にしたいポータル
ジャパンデザインネット
CYBER@GARDEN

要チェック
Olly Hodgson

]]> http://yagi.tc/archives/2004/10/11/29/feed/ 0 WEBにも季節感は必要だと思う http://yagi.tc/archives/2004/10/10/27/ http://yagi.tc/archives/2004/10/10/27/#comments Sun, 10 Oct 2004 06:15:22 +0000 yagitch http://labs.yagi.tc/sp/?p=27 最近デザインがいいなと感じたページを少々。

GROUND
アーティスティックな活動を続ける地域貢献チーム。

広島百科旅に宿
ホテル連盟の旅行ガイド。

ext.Universe
CGI配布サイト。

タクミノセカイ Side-D
ブログ。

WebDesigning10月号で紹介されてた便利ツール。
Webページアクセシビリティのチェック用ツールバー「Web Accessibility Toolbar 日本語版」
IEのみ対応。CSS使いまくりのサイトでもCSS外したときに読めるかどうかは把握しておいた方がよいかと。

]]> http://yagi.tc/archives/2004/10/10/27/feed/ 0 ウェブクリエイターズ11月号よりピックアップ http://yagi.tc/archives/2004/10/03/11/ http://yagi.tc/archives/2004/10/03/11/#comments Sun, 03 Oct 2004 05:20:13 +0000 yagitch http://labs.yagi.tc/sp/?p=11 今日は雨の日。洗ってないスーツ、汚れたクルマ、出る気が失せたパーティ。外出2時間前。

ウェブクリエイターズ11月号よりピックアップ。
SAKE
TOMBOW Design Collection
Eva solo（音有注意）

仕事の関係と、FLASHで動くRSSリーダを見つけたことで私の中ではFLASHブーム気味。

FLASHで動くRSSリーダー
F-site（FLASH情報）
DRUM MACHINE（FLASHムービー：音有注意：東京プラスチック）
艦砲射撃！（FLASHゲーム：nextFrame）
三和豆友食品（企業サイト：音有注意）

]]> http://yagi.tc/archives/2004/10/03/11/feed/ 0 絵師さん参考メモ http://yagi.tc/archives/2004/10/03/10/ http://yagi.tc/archives/2004/10/03/10/#comments Sat, 02 Oct 2004 19:12:22 +0000 yagitch http://labs.yagi.tc/sp/?p=10 CG美少女を書く人のサイトはどこも凝っているので参考になる。
これまでためてきたのをメモ。

SPRING WATER
DependSpace
T.N.R with G
せひらねっと
W-SONIC Web
ロマンドリップ
Expensive Noise
ExCHOCOLATE SHOP Float
yocky’s HomePage

絵師じゃないけど同人音楽
Scanning Around

絵師じゃないけどポータル
DEX WEB(デザインのポータル)
Color-club.com(色彩のポータル)

関係ないけど
Creator’s Exchange
ロゴ、標識などピクトグラムのEPSデータのフリーダウンロード。

]]> http://yagi.tc/archives/2004/10/03/10/feed/ 0