Moz - SEOとインバウンドマーケティングの実践情報
行き詰まったときに役立つウェブデザイン8つのノウハウ

イメージ画像

ウェブデザイン作業には、びっくりするくらいイライラすることがある。

何をどこに表示するか無限の可能性があるのだから、真っ当なデザインがいとも簡単にできあがると思うじゃないか。でも、正常に表示できないデザインに何時間も手を焼いたり、今どき流行らないピクセル調整をするはめになったりとか、誰でも何らかの形で行き詰まった経験がある。

これから紹介する8つのノウハウは、そうした厄介な状況から抜け出すために、私が取る作戦だ。

  1. 先に中身からデザインする

    これは、今までに聞いたウェブデザインに関するアドバイスの中でも、最良の部類に入るものだ(Cameron氏に感謝を)。

    多くのデザイナーが、まずヘッダーに力を注ぐ。でもたいていの場合、見映えのするページになるか否かは、ページの中身で決まる。ヘッダーは付け足しだ。とりあえずヘッダーのことは忘れて、中身の要素に取り組んでみよう。すると、しっかりした中身があれば、ページのデザインがどれほど簡単かってことに驚くはずだ。

    それでもまだ中身が空っぽのままヘッダーをデザインすることがあれば、素っ裸のまま鏡の前でネクタイを直している姿を想像してみると良い、ウギャーってなっちゃうだろ。

  2. 下絵を書く

    ホワイトボードは私の救世主だ。紙と鉛筆も役に立つ。

    グラフィックデザインのプログラムを立ち上げるよりも、まず螺旋綴じノートに縮小モデルを何十と描き起こすデザイナーの記事を、何年か前に読んだことがある。縮小モデルを描くと、各要素をどこに配置し、どの選択肢がいちばん見映えがいいか確認できて便利って話だった。

    こんなふうにモデルを作る最大のメリットは、手っ取り早くレイアウト案に熱中できる点だ。下絵を描いてはボツにして、また別の下絵を描いてはボツにする。これを10回もやれば、ページをどんな風にまとめたらいいか、おそらくかなり良いアイデアが浮かんでいるだろう。

    Axureみたいなプロトタイプツールを、何度か使ったことはあるけれど、それでもやっぱり、ホワイトボードのマーカーから漂う粋な香りにどっぷり浸っているときが、いちばん能率が上がるね。

  3. オフラインにひらめきを求める

    ここ2年間、デザイン関連のことに注意を払ってきたなら、きっと無数にあるCSSギャラリーやデザイン見本サイトの一部で、目についたものがあるはず。

    これらは素敵なひらめきの泉だけど、ちょっとしたオフラインのメディアが、新鮮なアイデアを思いつくのに必要なものだったってことも、ときどきあるんだ。新聞や雑誌を広げたり、食料品店に行ってパッケージを見たり、テレビ広告なんかも観たりしよう。タイポグラフィーや色、要素の配置など、デザインに応用できるものに注意を払おう。「この雑誌広告で自分が気に入った点は何だろう」「このパッケージが良い感じなのは何故だろう」といったように、考えながら観察することが大事だ。

    従来型メディアの観察から学べることは、たくさんある。数年前、同僚がロシアのポスターと1920年代の印刷広告が満載の本を貸してくれた。その本を見て、学びとった教訓は非常に貴重なものだった。特に、狭い空間に多くの情報を詰め込みつつ、「ごちゃごちゃ」した印象を与えないことに感心した。

  4. あきらめることを学ぶ

    見た目は途方もなくかっこいいボタンなのに、デザインの中に収まらない、こんな経験をした人もいるだろう。

    途方もなくかっこいいボタンに、並々ならぬ労力を注いだんだから、ボタンを動作させるためなら、何だってやってしまうだろう。そのとんでもないボタンを自分のページで真っ当に表示するためなら、空間や時間の法則だってねじ曲げてしまうだろう。それが当事者の心情というものだ。

    あきらめることを学ぼう。ボタンを保存し、どこかにしまっておけば良い。今回は戦いに敗れたけれど、将来デザインに使えるかもしれない凄いボタンのストックは、すぐに溜まるだろう。

  5. パソコンから離れる

    「下手の考え休むに似たり」の言葉にあるとおり、事が上手く運ばないのに、無理を続けたところで仕方がない。ちょっと休憩を取って、気持ちを落ち着けてから取り掛かった方が、たぶん簡単に済む。

    ウェブデザインに関して言えば、ある意味この状況は常に当てはまると気づいたんだ。自分が取り組んでいるデザインが嫌になっても、数日寝かせておくと、多くの場合、改めて取り掛かったときに「こんなのクズだと思ってたけど、すばらしいじゃないか」と気が変わる。

    逆に、これまで手がけた中でも最高のデザインだと思って、夜遅くまであくせく働くことがよくあるが、一晩明けてもういっぺん眺めてみると、見るも無惨なページにうんざりすることもある。

    ここでの教訓は、デザインはしばらく寝かせておけということだ。

  6. 吸収する

    孤立した状態で、芸術は生まれない。ほかのデザイナーの作品で、自分がとても気に入っているのはどういう点か突き止め、自分の作品に取り入れることを学ぼう。

    デザインの盗用は論外だけど、外部から得る刺激を拒むのも駄目だ。なぜその見た目が大好きなのか、しょっちゅう確認して癖にすると良い。自分も、ぶったまげるようなデザインに出くわしたら、何が原因で美的に見えるのか、徹底的に調べるようにしている。

    The Tangerine Treeというウェブサイトが、サンプルとしては良いだろう。なるほど、すばらしい見た目だ。そして、それはなぜか。個人的には、古めかしいメディアに超モダンな形を取り入れているところ、すなわち、アンティーク調の紙から切り取ったように見える漫画っぽい泡や雲が、とても気に入っている。このデザインを見たとき、こう自問したんだ。「この手のテクスチャーで何ができるだろう」「この形やアイコンが目を引くのは、どんな理由なんだろう」とね。

  7. 一発屋で終わらない

    過去に何かで成功しても、おなじテクニックを繰り返し使わないようにしよう。

    自分がついつい頼りがちなのは、濃淡を付けた矩形だ。デザインがうまく行っていない気がすると、いつも濃淡を付けた矩形を使う悪い癖がある。「このデザインは最低だな。よし、グラデーションで塗った矩形を足そう」という具合だ。でも、以前のあらゆる作品と同じように見えるので、たいてい不満な結果に終わる。

    「今日は影付けを使わない」とか、「2次元の要素しか使わないぞ」といった馬鹿げたルールを決めて、それを守るようにしよう。特定のデザインを多用する癖から抜け出そうとすれば、いやでも新しいスタイルを身に付けざるを得なくなる。自分にとって、デザイナーとしての幸せは、見映えがすると同時に、それまでに手がけたものとは違うものを生み出せることにある。

  8. 他人にアドバイスを求める

    これにはコツがいる。ウェブデザインを台無しにする方法は、いくらでもあるからね。間違ったタイプの人間が関与している場合は、なおさらだ。誰に尋ねるか気をつけ、建設的な批判ができる人を見つけよう。

    過去に手作り菓子即売会のチラシを数枚印刷したことがあり、自分はあらゆるデザインの「専門家」だと思っている美的センスのない事務員の手にかかり、多くのすばらしいデザインが死んでいくのをこの目で見てきた。

    もし、誰かがあなたのデザインは「しっくりこない」とか「気に入らない」と言ってきたら、ほかの人にアドバイスを求めた方が良い。具体的に何が悪くて、どうすれば良くなるかアドバイスできる人を見つけよう。それと、神経を図太くしよう。批判を受ける度に、自分の芸術作品に対する攻撃だなんて、思い込まないように。飄々といなす心構えが大事だ。

自分のデザイン力に磨きをかけるテクニックを、ほかにも何か思いつくことができるかな?

この記事が役に立ったらシェア!
tweet10このエントリーをはてなブックマークに追加
みんなが読んでるWeb担メルマガで、あなたも最新情報をチェック
  • SEOやアクセス解析のなどノウハウをゲット
  • 事例やインタビューも見逃さない
  • 要チェックのセミナー情報も届く
  • 編集長コラムを一足先に読める

日本赤十字社 東日本大震災 義援金募集
みんなが読んでるWeb担メルマガで、あなたも最新情報をチェック
  • SEOやアクセス解析のなどノウハウをゲット
  • 事例やインタビューも見逃さない
  • 要チェックのセミナー情報も届く
  • 編集長コラムを一足先に読める

人気記事トップ10(過去7日間)

今日の用語

AOSSL
「Always on SSL(常時SSL)」の略。 基本的にサイトは非HT ... →用語集へ

連載/特集コーナーから探す

インフォメーション

Web担のメルマガを購読しませんか?
Web担の記事がコンパクトに毎週届くメールマガジン「Web担ウィークリー」は、10万人が読んでいる人気メルマガ。忙しいあなたの情報収集力をアップさせる強い味方で、お得な情報もいち早く入手できます。

Web担に広告を掲載しませんか?
購読者数10万人のメールマガジン広告をはじめとする広告サービスで、御社の認知向上やセミナー集客を強力にお手伝いいたします。

サイトマップ
RSSフィード


Web担を応援して支えてくださっている企業さま [各サービス/製品の紹介はこちらから]

GOLD SPONSOR
さくらインターネット株式会社株式会社KDDI ウェブコミュニケーションズ株式会社日本レジストリサービスオープンテキスト株式会社トランスコスモス株式会社株式会社ハイパーボックスDomain Keeper
SPONSOR
株式会社キノトロープ株式会社アイレップ株式会社ニューズ・ツー・ユーシックス・アパート株式会社ウェブアンテナ株式会社サイバーエージェント富士通株式会社Sitecore