アイコンでガラリと変わるWebデザイン――gihyo.jpのアイコンもリニューアル?!

この記事を読むのに必要な時間:およそ 2 分

アイコンを使ったサイトのデザインテロの実演

では,その素敵なアイコンとは何か?素敵なアイコンと言って思いつくのはMac OSXやiPhoneアプリ。素敵なアイコンのヒントはその生みの親,スティーブ・ジョブスがiPhoneを初披露したときに言った言葉にありそうです。

「どうだい,舐めたくなるアイコンだろう?」

なるほど,素敵なアイコンとはつまり舐めたくなるアイコンだったのか!実際,iPhoneのデフォルトで入っているアプリはアイコンを印刷した紙をジョブスの前にぶら下げて,それを舐め始めたら採用,というプロセスを踏んで決定したそうです。

では,早速デザインテロの実演。Remember The Milkのクライアントの紹介サイトのアイキャッチにアイコンを使ったものを作りました。

「どうだい,舐めまわしたくなるアイコンだろう?」

「どうだい,舐めまわしたくなるアイコンだろう?」

舐めたくなるアイコンの先を行く

舐めたくなるアイコンはOKということで,ここからさらに先へ行かなければまだまだWebデザイナー業界のサバイバルを生き抜いていけるかの不安がついてまわります。そこで考えた末たどり着いたのが「齧り付きたくなるアイコン⁠⁠。

続いてはTwitterのクライアントにデザインテロの実演。

「どうだい,齧り付きたくなるアイコンだろう?」

「どうだい,齧り付きたくなるアイコンだろう?」

とは言え,ドット絵もまだまだ必要

リアルなアイコンは効果絶大とは言え,アプリの管理画面のボタンの横に添える小さなアイコンやFaviconなど,解像度の低い画像の場合はドット絵の方が有効な場合があります。リアルなアイコンだけではなく,やはりドット絵のスキルもまだまだ必要。Twitter関連ついでに,ドット絵を使ったFollow me バナーも作ってみました。

ドット絵を使ったFollow meバナー

キャラクターを使ったアイコン

ツールの世界ではLinuxのペンギン「タックス」やFreeBSDの「デーモン」を始めとしてIT業界を彩るたくさんキャラクターがいます。特にHadoop関係は楽しいキャラクターの宝庫。

Hadoopのたのしいなかま

もし,デザインテロをするときに,その標的に何か関連のあるツールがあり,それにキャラクターがあったなら,そのキャラクターを使ったアイコンを作ることにより,これは関連がありますよ,ということを文章よりも素早く簡単に伝えることが出来ます。これもアイコンを作る上でのテクニック。

例えばキャラクターではないですが,Ruby関連のツールは赤いRubyのアイコンがそのツールのアイコンに含まれていることが多く,そうすることによって「これはRuby関係しているものである⁠⁠,ということが一目瞭然になります。これがRubyに興味がある人の注目を集めるのに効果抜群。

では,愛らしいApache Pigの豚野郎を使ってキャラクターを使ったアイコン作成のデザインテロを実演。

豚野郎

gihyo.jpにキャラクターを使ったロゴのデザインテロ

では,最後に今回記事を書かせていただきましたgihyo.jpさんにキャラクターを使ったロゴのデザインテロをして今回の記事は終了とさせていただきます。

gihyo.jpの「g」がオタマジャクシに見えてきたのでキャラクターはオタマジャクシに決定。オタマジャクシのキャラクターを使ったロゴを作ってみました。

gihyo.jp

著者プロフィール

町田哲平(まちだてっぺい)

FJORD,LLC 代表社員 デザイナー。

2007年にFJOED,LLCを立ち上げ,パートナーのエンジニア駒形真幸(こまがたまさき)と自社サービスの開発,受託開発の傍ら,国産Ruby製CMS「Lokka」の開発やデザインテロをテーマにしたブログ,「KUROIGAMEN」を執筆。

バックナンバー

デザイン

  • アイコンでガラリと変わるWebデザイン――gihyo.jpのアイコンもリニューアル?!