独学で極める “Webデザイン”の技と心

第4回 参考作品・参考資料を活かしたWebデザインのコツ

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

ギャラリーサイトの代表例

個人的な主観も交えてご紹介します。

デザインリンクデータベース
色別・コンテンツ種類別・テイスト別に検索ができるので,目的のデザインが見つかりやすいです。
CSS Hazard
アーティスティックで刺激的なデザインが揃っています。
CSS Beauty
フルCSSで構築されている,良質なサイトのギャラリーです。サイトのごく一部分をサムネイルとしているので多少探しにくいかもしれませんが,タグで分類されており,情報量は多いです。
light on dark
ダークな背景色に絞り込んだギャラリーサイトです。

その他,筆者が気になるギャラリーサイトは POOKMARK Airlines のgallery タグのページでご覧いただくこともできます。

海外のサイトを見渡せば,他にも「CSS**」という名称のギャラリーサイトがたくさんあります。CSSブームとも思えるくらいたくさん見つかりますが,デザインのための参考であれば,コードの厳格さや CSSで書かれていることよりもまずはビジュアルやレイアウトの参考になるかどうかという視点でクリップして,自分で実際に仕上げるときにコードに気を配るという手順のほうが良いと思います。

また,Webデザインのための資料は必ずしもWebから探すだけではありません。日常のあらゆるモノに参考資料はあふれています。目を引くチラシやフライヤー,雑誌や本,ポストカードなど,アナログの世界で心を惹き付けるものは,必ずWebでもヒントになりますので,日ごろからアンテナを敏感にしておくと,デザインを楽しむことができるようになるはずです。

ただ,ここで忘れてはいけないことは,ビジュアルの美しいサイトが必ずしも目的を果たすわけではないというところです。しつこいようですがデザインはアートではないので,私たちデザイナーは,目的を果たすために必要なビジュアルや導線も設計しなければならないことを頭の片隅におきながら,参考にしていけると良いでしょう。

④ 参考資料,参考サイトの分類

こうして見つけた参考資料・サイトをいつでも閲覧できるようにしておくと便利です。気軽に使えるものの代表例としては,オンラインブックマークサービスがぴったりです。あとで参照しやすいようにタグ(キーワード)を使って分類もできますし,サイトのサムネイル表示に対応したサービスもあります。

たとえばポップカルチャーを扱うサイトに「pop⁠⁠,1960年代のテイストが感じられるサイトに「60s」とタグを付けます。

可能なかぎり「そのサイトのどこが良かったのか」⁠どこが参考になるのか」を注意深くみて,メモをしておきましょう。

POOKMARK Airlinesで気になるサイトをクリップしてメモした例のスクリーンショット

POOKMARK Airlinesで気になるサイトをクリップしてメモした例のスクリーンショット

⑤ 良いと感じられるサイトを研究して,まずは「真似」してみる

上達するために良いものから学ぶのはとても良いことです。⁠学ぶ」の語源が「まねぶ」と言われるように※1⁠,まずは良い作品の良いところを参考にして,かみくだいて自分のものにしていくことが大切だと考えています。

このプロセスを経て,ほぼコピーしたものをそのまま自分の作品と偽って世の中に出すという意味ではありません。

良い作品は,どこが良かったでしょうか。それは配色ですか? スペースの取り方ですか? レイアウトですか? フォントの選び方ですか? 見どころはたくさんあるはずです。

次回は,このプロセスの続きを,具体例を交えてご紹介します。

※1

参考文献。<学ぶ(まなぶ⁠⁠- 語源由来辞典>より引用。

学ぶは,⁠まねぶ(学ぶ⁠⁠」と同源で,⁠まねる(真似る⁠⁠」とも同じ語源である。

そのため,学ぶの語源は「真似ぶ(まねぶ⁠⁠」とされることも多いが,⁠まなぶ」「まねぶ」は同じ時代に見られる語で,その前後関係ははっきりしていない。

「真に似せる」の意味から「まね」「まねぶ」が生まれ,⁠まなぶ」という語が生じたか,⁠誠に習う」の意味から「まなぶ」が生まれ,名詞形「まね」と,その動詞形「まねぶ」の語が生まれたと考えられる。

「まなぶ」は,教えを受けたり学問をする意味で多く用いられ,⁠まねぶ」「まなぶ」よりも学問をする意味は薄く,模倣する意味で用いられることが多かった。

著者プロフィール

山田あかね(やまだあかね;purprin)

エスカフラーチェLLC,デザイナー。名古屋出身。Web業界とまったく関係ない業種で独立して働く傍ら,Web/XHTML/CSS等技術を独学。2005年「コトノハ -○×ソーシャル」のデザインリニューアルを行ったのをきっかけに上京し転職。株式会社paperboy&co.で主にソーシャルブックマークサービス(POOKMARK Airlines)等の Webサービス開発に携わる。2007年1月,エスカフラーチェLLC の設立に参画し,デザイナーとして幅広く活躍中。

URLhttp://purpr.in/blog/