[連載]Webデザイン入門(2:スケッチしよう)

私は、職業柄(?)プログラマー・SEの方などに「これからWebデザインもやりたいけど、どうすればいいか」と相談されることがあります。
そういう時、私はまず「優れたデザインのサイトを見て、それをスケッチする」ことを薦めています。

たった1度やって頂くだけでも、明らかにデザインに対する見る目が変わるのでお勧めです。

スケッチしよう

なぜスケッチが必要か?

なぜスケッチが必要か

多くのPCスクールやWebスクールでは、Photoshop などの「ソフトの使い方」を中心に教えているようですが、それだけだとWebサイトをデザインするのは難しいと思います。

なぜなら、Photoshop などのソフトは「頭の中にあるもの」を制作することはできますが、「頭の中にないもの」を制作することは難しいからです。

デザインは、ソフトが自動的にやってくれるものではありません。
自分の力で1から作る必要があるのです。

そのために、「良いデザイン」とされているものをたくさん見て、それを吸収するためにスケッチしましょう。

まずは美しいサイトをたくさん見よう

まずは、良いデザインのWebサイトを集めたリンク集を見て、以下のことを考えてみましょう。

そして、以下のことを考えてみよう

私の場合、スケッチブックの左側のページをメモ欄にして、右側のページにスケッチを書いています。

左側のページには、スケッチ前に「なぜそれをスケッチしようと思ったか」を書きます。

次に、右側のページにスケッチします。

スケッチが終わったら、再び左側のページに「そのページのどこが見やすい、使いやすいと思ったか」など良い点と、「さらによく出来るところはどこか」を書いてみましょう。

これを、毎日1枚描かれることをお勧めします。

Webコーディングスクール 体験レッスン受付中

おすすめのWebデザインギャラリーサイト

Webデザインギャラリーサイトは国内外たくさんありますが、国内のサイトでおすすめのものを3つだけあげておきます。

ぜひ、ブラウザのブックマークに入れておきましょう。

ikesai.com

S5-Style

I/0 3000

Internet Explorer をお使いの方へ

Windows XP で Internet Explorer(バージョン6〜9)をお使いの方は、この機会に Google ChromeFirefox というブラウザ(Webページ閲覧ソフト)をインストールし、できれば「標準のブラウザ」として設定しておきましょう。

Internet Explorer は、単にページの表示速度が遅いだけでなく、CSS(スタイルシート)などの処理にバグ(プログラムミス)が多いことからWeb制作者のあいだで非常に嫌われているソフトです。

例えば、ご自分でページを制作し、それが思い通りに表示されない場合、自分の CSS の書き方が間違っているのか、それとも Internet Explorer のバグなのか見極めるには、Firefox や Google Chrome で見てみればすぐに分かります。

Firefox や Google Chrome は Internet Explorer に比べて非常にバグが少ないので、ご自分でページを制作される際はまず Firefox や Google Chrome で確認し、最後に Internet Explorer で確認されることをお勧めします。

参考資料

あまり綺麗なスケッチではないのが申し訳ありませんが、参考程度に以前私が描いたスケッチも載せておきます。

参考にしたキャンペーンページ

Wireframe Showcase というサイトには、海外のWebデザイナーが描いたワイヤーフレーム(サイト制作前に描くスケッチのようなもの)と実際のサイトの例がたくさん載っています。
手書きのものもそうでないものもありますが、参考になると思います。

補足

この日は、講義の中でギャラリーサイトから1つ選んで実際に描いて頂きました。
また、生徒の方々には今後「1日1枚」スケッチを続けるよう話をしています。

ブログをご覧になっている方も、ぜひ1日1枚描いてみてください。

デザインがなかなか思い浮かばない方、デザインに時間がかかる方などにとって非常に有効だと思います。
(大抵の場合、デザインが思い浮かばないのはたくさんのサイトを見ていないためバラエティが少なく、デザインに時間がかかるのは頭の中のイメージをスケッチせず、いきなり Photoshop に向かっているためだと思います)

このあと、Photoshop の基本操作(この日は丸・三角・四角形・角丸四角形などを描く、パスツールで形を描く)を行なっています。
Photoshop は、お持ちでない方も以下のページから体験版(30日間機能制限なしで利用可)がダウンロードできます。

Photoshop 無償体験版ダウンロード

Photoshop は入門書も数多く発売されていますが、Webデザインに特化したものはそれほど多くありません。
以下の本は、私が執筆したWebデザイン向けの Photoshop と Illustrator の入門書です。

プロになるためのWebデザイン入門講座

最近の記事

Web制作関連動画

メルマガ会員向けの「コーダーにも役立つ補完AI『Codeium』の使い方」の動画を期間限定で公開しています。
CodeiumはGitHub Copilotと似ていますが、CSSなども補完できて、今登録すれば無料で使えます。

メルマガでは、Web制作者のためのAI活用やWordPress関連の動画など、さまざまな特典があります。ご興味ある方は、ぜひメルマガにご登録ください。
Index