[webデザイン概念] カラー・デザインをレギュレーション可してクオリティアップする方法

2021/08/19

テクノロジー

t f B! P L
eyecatch クオリティって、ほんのちょっとの事で、全然変わってしまうことを、過去に何度も見たことがある、ユゲタです。 ホームページを作る時に、どうしても素人レベルのデザインしかできない人と、 めちゃくちゃカッコいいページを作れるデザイナーの人って、 一体何が違っているんでしょう? それは、デザイナーの人は、カッコよく見せる方法を知っているというだけなんですね。 ※もちろん、それ以外にもありますが、ほとんどの場合、「カッコいい見せ方パターン集」というモノを自分で持っているかどうかで 出来上がりの差が圧倒的になります。 何を隠そう、このユゲタも、元グラフィッカーを名乗っているにも関わらず、デザインには、全く自身が無く、 企業からのシステム依頼の際に、別にデザイナーが用意した素材をコーディングすることも数多くありました。 でも、最近、「LP模写」をやってみて、これが思いの外、デザインの学習になったので、 そこで学習したことを、ちょっとずつ、ブログに備忘録していきたいと思います。

デザインの基本は、余白と色

一言で言うなら、webデザインは、「大きすぎるほどの余白をとって、色を3色以内で構成すると、素人っぽくは見えない」という事。 ちょっとこれだけだと荒っぽいので、解説をすると、 素人の人がwebページを作ると、とにかく、文字や画像を並べることに、一生懸命になって、 ギッチギチのwebページが出来上がります。 実際にプロのデザイナーの人は、1画面に1メッセージぐらいの情報量で良いことを知っているため、縦長ページになったとしても、一番目立たせたい文字(一言)を、画面の中央に配置して、それを目立たせるために、その周辺は空白にすることが多いです。 そうするだけではなく、tableタグのそれぞれのセルの内部のpaddingは、文字サイズよりも大きく取るし、文字も詰まった感じをなくすために、字間スペースを広く持たせるようにします。 これに、ページ全体で、文字サイズが整理されていれば、それだけでも、読みやすく見た目もキレイなページができあがります。 これに、色を3色ルールで構成することで、より高品位なデザインに仕上げることができるでしょう。 3色というのは、よく言われている色数なのですが、個人的には、これを1色の濃淡で行うことで、かなり統一された雰囲気が出て、ホームページのデザインにまとまりが出ることがわかりました。 逆に言うと、色をたくさん使うwebサイトは、見ていて乱雑に見えてしまうということなんですね。 モノトーンぐらいまで、ハッキリさせてもいいし、1色階調みたいにしても、デザインとしてはよく見えます。

ページの後味は文言でも決まる

デザインはもちろんですが、webサイトで伝えたいことを、閲覧する人に伝えようとするには、 改めて「文言選定」が重要という事がわかりました。 ようするに、「キャッチコピー」です。 例えば、 「他の商品よりも、効果が出やすいダイエット食品!」 と書くよりも、 「1日1粒で、1キロダイエットできる」 (数値はサンプルです) という風な想像がしやすい文面を一言で、書いたほうが、圧倒的に伝わりやすくなります。 キャッチコピー概論だけでも、書籍が山ほど出ているので、それを読んでみると、結構ハマることも多いですよね。

効率を良くするための自分ライブラリ

そして、プロとアマの人の圧倒的な差は、 アマチュアの人は、その場でGoogle検索をして、出てきたソースコードをコピペする作業を永遠繰り返しますが、 プロの人は、自分のライブラリのソースコードをコピペする作業で、効率も良ければ、 そのライブラリの適材適所をよく理解しているということなんですね。 普段何気なく見ている色々なwebサイトで、いい表現やパーツを見つけた時に、 それを自分ライブラリに取り込んでおくというのは、非常に重要な自分効率化の方法ということだったんです。 ワーカホリックになりそうな人にはおすすめできませんが、実際にプロになりたいと思っている人には、 面倒くさがらずに、ググってデザインパーツを取得する側から、人にググられてパーツを提供できる側になると、 いいのではないでしょうか? という感じで、ボクも日々、パーツ作りに励んでいます。

人気の投稿

このブログを検索

ごあいさつ

このWebサイトは、独自思考で我が道を行くユゲタの少し尖った思考のTechブログです。 毎日興味がどんどん切り替わるので、テーマはマルチになっています。 もしかしたらアイデアに困っている人の助けになるかもしれません。

ブログ アーカイブ