デザインを起こすために何から始めれば良いか
独学でWebデザインを極めていくとはいえ、まっさらな状態から何かのデザインを起こすためにはまず何から手をつければ良いのかすらわからない時期がありました。
周りにデザインについて教えてくれる先輩がいる場合は、直接コツを尋ねてみることも良いかもしれませんが、そういった環境でない場合（とくに独学で勉強されている方の場合）「良い作品を見て、実際に良い作品のどこが良いのかを分析して、良い作品を参考にしながら自分の手を動かし、考え、作ってみること」が大切だと思います。
かく言う私も、異業種でしたし、デザインに詳しい先輩や先生が近くにいるわけではありませんでした。経験上、作ってみて試行錯誤することが、結果的に一番身に付いていると思っています。
仕事としてデザインする場合は何かの目的があって、あらゆる制限の中で依頼されることがほとんどですが、まずはスキルアップを目的とするのであれば制限も何もいりません。自分の好きなように何か作ってみましょう。突然気負いして大掛かりなサイトを作らなくてもかまいません。ちょっとした1枚のページでも良いのです。
今回は、自己紹介ページを例にとって、どのようなプロセスでつくっていけば良いのかを考えてみます。
自己紹介ページを例にとってプロセスを考える
一番身近に作れそうな題材として、自己紹介ページとしてみました。
単純に表組みをしてニックネームや趣味を並べるだけでもできあがるものですが、そこでデザインすることにより、自己紹介に付加価値を付けることができるようになります。
自分のことを効果的にアピールすれば良いのですから、自分が一番アピールしたいところ、自分の信念、自分の好きなものなどをまず箇条書きにしてみましょう。これらは公開しなくてもかまいません。自分にあてはまりそうなキーワードを羅列するだけです。
ごくあたりまえのことかもしれませんが、こういった箇条書きの断片に、Web デザインのヒントが沢山詰まっています。
① 自己紹介に関連するキーワードの書き出し例
緑色が好き
→安直ですが、好きな緑色をベースカラーにしてみても良いでしょう。
海が好き
→海をテーマにしたデザイン・挿絵などを検討できそうです。
夏が好き
→夏を連想させる風景・行事・動物などを取り入れてみても良いでしょう。
職業は服飾デザイナー
→自己紹介をみて仕事依頼がくるようなきっかけ作りを想定した場合に、とても重要なキーワードとなります。
1960年代のポップカルチャーに影響を受けている
→その年代に流行した配色やファッションアイテムなど、さまざまな参考資料を引っ張りだすことができます。
一度決めたことは最後までやり通す性質
→芯のかたさを売りにするような抽象的なモチーフや背景などを創造するヒントになります。
- ※実際はもっと多く挙がると思いますが、わかりやすい例として抜粋してあります
これらすべてを取り入れてしまったらどこかでコンフリクトしてしまいます。この中で一番自分がテーマとしたいところ・大切にしているところを絞り込んでいきます。もちろんどれも大切と言ってしまえるのかもしれませんが、ここでどんなものを引き算していくのかで、方向性がはっきりしてきます。
② 目的を再確認し、テーマを定める
- 目的 得意分野のアピールを兼ねた自己紹介をする
- 1960年代のポップカルチャー・ファッションをイメージさせるテーマ
このように定めておくと、参考資料がぐっと探しやすくなります。
③ テーマに沿った他の参考資料や参考サイトを探す
この段階で、同じような方向性を持つサイトをリサーチします。自己紹介サイトというだけではあまりにも広範囲ですので、ここは「1960年代ポップカルチャー」というキーワードで探してみましょう。
普通に検索サイトでキーワードを入れるやり方も1つの方法ですが、良質なサイトを集めたギャラリーサイトには、色別、目的別で検索できるものもあり、効率良く良質なサイトを閲覧することができるのでお勧めです。
ギャラリーサイトの代表例
個人的な主観も交えてご紹介します。
- デザインリンクデータベース
- 色別・コンテンツ種類別・テイスト別に検索ができるので、目的のデザインが見つかりやすいです。
- CSS Hazard
- アーティスティックで刺激的なデザインが揃っています。
- CSS Beauty
- フルCSSで構築されている、良質なサイトのギャラリーです。サイトのごく一部分をサムネイルとしているので多少探しにくいかもしれませんが、タグで分類されており、情報量は多いです。
- light on dark
- ダークな背景色に絞り込んだギャラリーサイトです。
その他、筆者が気になるギャラリーサイトは POOKMARK Airlines のgallery タグのページでご覧いただくこともできます。
海外のサイトを見渡せば、他にも「CSS**」という名称のギャラリーサイトがたくさんあります。CSSブームとも思えるくらいたくさん見つかりますが、デザインのための参考であれば、コードの厳格さや CSSで書かれていることよりもまずはビジュアルやレイアウトの参考になるかどうかという視点でクリップして、自分で実際に仕上げるときにコードに気を配るという手順のほうが良いと思います。
また、Webデザインのための資料は必ずしもWebから探すだけではありません。日常のあらゆるモノに参考資料はあふれています。目を引くチラシやフライヤー、雑誌や本、ポストカードなど、アナログの世界で心を惹き付けるものは、必ずWebでもヒントになりますので、日ごろからアンテナを敏感にしておくと、デザインを楽しむことができるようになるはずです。
ただ、ここで忘れてはいけないことは、ビジュアルの美しいサイトが必ずしも目的を果たすわけではないというところです。しつこいようですがデザインはアートではないので、私たちデザイナーは、目的を果たすために必要なビジュアルや導線も設計しなければならないことを頭の片隅におきながら、参考にしていけると良いでしょう。
④ 参考資料、参考サイトの分類
こうして見つけた参考資料・サイトをいつでも閲覧できるようにしておくと便利です。気軽に使えるものの代表例としては、オンラインブックマークサービスがぴったりです。あとで参照しやすいようにタグ（キーワード）を使って分類もできますし、サイトのサムネイル表示に対応したサービスもあります。
たとえばポップカルチャーを扱うサイトに「pop」、1960年代のテイストが感じられるサイトに「60s」とタグを付けます。
可能なかぎり「そのサイトのどこが良かったのか」「どこが参考になるのか」を注意深くみて、メモをしておきましょう。
POOKMARK Airlinesで気になるサイトをクリップしてメモした例のスクリーンショット
⑤ 良いと感じられるサイトを研究して、まずは「真似」してみる
上達するために良いものから学ぶのはとても良いことです。「学ぶ」の語源が「まねぶ」と言われるように[1]、まずは良い作品の良いところを参考にして、かみくだいて自分のものにしていくことが大切だと考えています。
このプロセスを経て、ほぼコピーしたものをそのまま自分の作品と偽って世の中に出すという意味ではありません。
良い作品は、どこが良かったでしょうか。それは配色ですか？ スペースの取り方ですか？ レイアウトですか？ フォントの選び方ですか？ 見どころはたくさんあるはずです。
次回は、このプロセスの続きを、具体例を交えてご紹介します。
