スキルアップ

【初心者】「形態は機能に従う」ウェブデザイン上達法は、機能美を意識

2019年12月21日

トレンディです。

40代になってから独立しフリーランスデザイナー&ブロガーとして生きています。

これからデザインを始めようといった方や初心者の方はどうやって「デザイン」を考えれば良いか、決めれば良いか迷うことも多いかと思います。

デザインをする上で「形態は機能に従う(form follows function)」という有名な言葉があります。

アメリカの三大巨匠の1人である建築家ルイス・サリヴァンが残した言葉。

「形態は機能に従う」とは

デザイン業界において「機能性を追求することによって、良いデザインになる」という思想があります。

でも注意してください。

機能を追求しすぎればデザイン性が破綻することもあります。

どちらか一方を追求しすぎればどちらも破綻します。

バランスが大事なんですね。

Appleのスティーブ・ジョブズもこの哲学に深く影響受けています。

スマートフォンのiPhoneプロダクトデザインや好きな車がポルシェだったことからもデザインへのこだわりが感じられますね!

変換違いですが「形態→携帯」に変えて

「携帯は機能に従う」としても良い言葉です(笑)

ただより良いデザインを目指すために注意点が3つあります。

  1. 「シンプル」の使い分け
  2. 感情や面白みに欠ける
  3. デザインと機能美の優先順位

「シンプル」の使い分け

「シンプル・イズ・ベスト」という言葉を知ってる!という方も多いかと思います。

シンプルってわかりやすくて時代や流行にも左右されないので、万人に受け入れられやすいのですがデザインが単調になるおそれがあります。

これは色だったり要素だったり視線の誘導だったり目立たせたい部分を強調しないと単調なデザインになってしまいます。

整列されていて綺麗で終わってしまってはいけないのです。

流行りのフラットデザインであってもシンプルですが、目的に合わせた配色や視認性がしっかり計算されています。

感情や面白みに欠ける

機能性を優先しすぎたデザインは、先述したとおり情報としは単調でつまらないものになってしまいます。

例えば、スーパーのチラシを見ていて白黒だけのデザインだったらどうでしょうか?

多くの人は「安い」「おいしそう」とは思わないはずです。

ただ新聞では派手なチラシが多い中で、1枚だけ白黒のチラシがあったら目を引かせることが出来るかもしれません。

それを狙うのであれば白黒デザインは機能し良いデザインといえるのです。

デザインと機能美の優先順位

「形態は機能に従う」を絶対的な基準とするのは高リスク。

目的とデザインの役割を考えて意識する必要があって、目的と役割がなければそれはほとんどが機能しない「悪いデザイン」となってしまいます。

機能美を追求するあまり無機質でトレンドに左右されないデザインになってしまったら魅力がなくなってしまいますよね。

ウェブデザインにおいても

  • ユーザビリティ(使い勝手)
  • LPO(ランディングページ最適化)
  • アフォーダンスと呼ばれる手法(ひと目で何を意味するかわかる!)

以上のようなことを意識してデザインする必要があり

  • 「使いやすくて愛用しちゃう!」
  • 「ついつい買ってしまう!」
  • 「わかりやすいからボタンを押してみたくなる!」

などなど心理的なデザイン要素も必要。

デザイン要素と機能美はバランスが重要になってきます。

ウェブデザインの上達法と勉強法

ウェブデザインが上手くなりたい!という人は身近なところにあるデザインや費用対効果の良い方法で学ぶことが大事です。

特に独学で学んでいる人は、なかなか自分の悪い癖やデザインに気づきづらい環境かと思います。

僕も初心者の頃は、自分で好き勝手にデザインしたものがオリジナルがあって良いものと判断してました(汗)

途中からプロデザイナーに、こてんぱんにダメ出しされて、今ではリピートの依頼を受けられるデザイナーに成長できました。

僕が教わって本当に良かったと思える
「上達する勉強法」を3つ挙げてみます。

  1. 広告を違う視点で見る
  2. デザイン本を読む
  3. デザインを実践する

 

  • デザインは綺麗なだけではダメ
  • 機能しないとダメ
  • 売れないとダメ
  • 反響がないとダメ

広告を違う視点で見る

「広告をいつもと違うデザイン視点」で見ると感性が磨かれる。

  • インターネット広告
  • 電車広告
  • 新聞広告
  • パッケージ
  • 書籍カバー
  • ゲームアプリ

他にもたくさんありますが世の中で見かけるデザインには、目的と役割が明確な良デザインがあふれています。

「この図形ってどうやって作ったんだろう?」
「なぜこの配色にしたんだろう?」
「どうしてこの部分は目立たせているんだろう?」

など考えながらマーケティングやデザイン視点で見ると感性が磨かれ上達できます。

広告の多くはマーケッターやプロのデザイナーが関わっているので理論と芸術性に基づいたデザインを体系的に学べます。

デザイン本を読む

デザインを学ぶ上で読書も有益。

ここでは割愛しますが、有名な本があるので自己投資のつもりで読んでみるのもありです。

デザインの原則を学ぶとベースづくりも優れたデザインになります。

関連記事
【デザイン編】初心者ウェブデザイナーが参考にしたい厳選本冊6〈感性を磨く〉

続きを見る

デザインを実践する

実践は最高の上達法。

TTP(徹底的にパクる)という言葉があります。

プログラミングだと写経。

とにかく真似て作ってみると上達は速くなります。

ただし、パクったものを商用や作品として使うのは絶対にNGです。

デザイン要素の足し算と引き算で考えてみることも実践では大事です。

これはごちゃごちゃ感が出てしまったときに特に有効で、視認性や機能を優先するからこの要素は思いきって削除!といった判断が「良いデザイン」につながります。

まとめると

職業やフリーランスとしてやっていく場合、自分で良いと思っても世の中に受け入れられないデザインは良いデザインとはいえません。

オシャレやカッコイイ、面白いだけでは、自己満足で終わってしまいます。

「形態は機能に従う」の哲学を取り入れると課題を解決できることが多いです。

デザインを学ぶことはたくさんありますが、初心者の方の参考になれば幸いです。

今回は以上です。

-スキルアップ