ホームページ制作MATSUTE BLOG

この記事は「2020年11月10日」に書かれた記事です

デザインの作り方は千差万別。人によって異なります。もしかしたら、基本の流れも違うかもしれません。この記事はホームページをデザインし始めて、つまずいている人向けです。

ホームページのデザインになかなかOKがでない

私自身ホームページのデザインをしていますが、完全独学です。はじめの頃は、つくっても、つくっても全然使ってもらえませんでした。自分でもどうあがいても、思い通りのデザインができないと悩んでしました。

ところが、はじめてホームページのデザインをしても、すっと、いいデザインができる人もいます。これたぶん、センスなのでしょう。それを言ったら身もふたもない気もしますが、私はセンスがなかったのか、と思い知らされたことで考え方を変えることができました。

センスがない

と思っていても仕事はできるようになりません。センスを補ってOKをもらえるデザインをつくらなければならない。そう思った私がOKをもらえるデザインを作れるようになるために、まずやったことは下記の5つです。

1. サイトを見る
2. 基本を知る
3. 日常的に訓練する
4. 書き出してみる
5. 作る順番を工夫する

1．サイトを見る

私がホームページ制作を始めた頃は、今のようにホームページリンク集がそれほどありませんでした。それでも大きなサイトがいくつかあったので、そのサイトに掲載されているホームページを休みの日に片っ端から閲覧するということを始めました。

分析していくのではなく、はじめは「ただ見るだけ」です。
リンクを開いてはスクロールし、これいいなと思ったら、そのリンクをチェックして取っておく。これを繰り返し行い500、1000とホームページを見て行きます。

もちろん、１日では見切れませんが、ざっと見て行くだけであれば、それほど日にちはかかりません。ヤフーのカテゴリリンクなども端から開いてみたこともあります。

その後、集めたリンクを見直します。
何がいいと思ったのか、参考にできる部分はあるか、選別していきました。

デザイン作成中に、参考サイトを見る場合

• ヘッダーに特化してみる
• メインイメージに特化してみる
• 見出しに特化してみる
• 下位ページのデザインに特化してみる

など、パーツに特化してみて行くこともあります。このときも数件みるのではなく100単位でページを確認してしました。見ているだけでも、

あ、こういうのいいかも

とヒントが見つかり始めます。

２．基本を知る

１と逆でも良いのですが、私の場合はこの順番でした。
ホームページを見た後、デザインの「基本」を知ろうとデザインの基礎について書かれた本を数冊読みました。ホームページに特化したものではなく、印刷のデザインや本のデザインなど、とにかくデザインの基本が書かれたものを読みました。

• 文字の間隔
• 行間
• 余白
• 文字の大きさ
• 線の使いかた
• 写真の置き方　など

そういったセオリーを知り、自分が集めたリンク集を見返してみると「なるほど～だからこれカッコいいのか」「きれいなのか」と分かってくるわけです。中でも一番大切だと思ったは「余白」の取り方でした。今でも、「このサイトいいな」と思うサイトは「余白」の取り方に隙がありません。「ここは直した方がいいのでは？」なんて思うところがない。

それも基本を知ればこそ。まだそう言った本を読んだことがないという人は一度読んでみることをお勧めします。○×形式でどっちがダメなデザインか、などクイズ形式で覚えていく本もあるので一番自分の中に入ってきそうな本を手に取ってみてはどうでしょうか。

３．日常的に訓練する

デザインは、日常にあふれています。

• 電車のつり広告
• 新聞・広告
• 看板
• テレビ（オープニングやCM）
• コンサートの演出
• 演劇の舞台装置

「この見せ方すごいな」「この色使いいいな」「この文字の使い方見やすいな」など。気にしてみてみると、どこでも参考になるデザインが転がっています。

私が最初にしたことは、電車に乗っているときの広告の分析です。

• この広告は目に入ってくる
• 何が目に入ってきた？
• どこが読みやすい？　など。

おこがましいですが、この広告のここは読みにくい気がするなと思ったときは、「何が読みにくいのか、どこがひっかかるのか」原因を探ることをしていました。これが一石二鳥なのはデザインの勉強にもなるし、すぐに目的の駅につくことです（笑）。

4．書き出してみる

ホームページのデザインではあまりやっていないのですが、bannerのデザインを始めた頃に、「書き出し」はよくやりました。

新聞の広告や広告業界の本、チラシのデザインを集めた本やホームページの制作集などから、コンテンツやバナーを抜き出して写真、文字、図形などの配置を手書きで書き出すという作業です。

• どの位置に何をおくと見やすいのか
• 配置するものの大きさはどのくらいがよいのか　など

配置を学ぶのに書き出しはとても役立ちます。

5．作る順番を工夫する

考えなければならない要素が増えると頭が混乱します。
私は「色」をつけるという作業が得意ではないため、はじめに色をつけません。

• ページ全体の配置などを決めたら
• すべてモノトーンで作成し
• 各パーツを仕上げ
• 全体のイメージが出来上がったところで、
• パレットに色を用意して一気に着色していきます。

色によっては膨張して見えたりなどの視覚的な要素が入ってくるため、色付けした後、全体のサイズ感や余白など最終的な調整を行います。