Webデザイン初心者が最初に身につけるべき構成力とは?
- カテゴリ

「Webデザイナーが身につけた方が良いことはありますか?」とよく聞かれます。私がおすすめするのは「構成力」です。ここで言う構成力とは、Webサイト1ページ内の情報をどう見せるか、ということです。
Webデザイン独特の構成力

Webサイトは縦に長いことが多く、スクロールしながら見るのが一般的です。そのため、サイトの上部に概要を載せ、下部に行くほど詳細な内容が載っていると読みやすくなります。この概要→詳細の流れは、雑誌など他メディアにもあります。
ここからがWebデザイン独特の構成。
コーポレートサイト、サービスサイトなどは見たい情報が最初から決まった上で閲覧するユーザーが多いです。
「扱っている商品が見たい」「求人情報が見たい」という感じです。この場合、ユーザーは上述の概要を読み飛ばして、自分の見たい情報をピンポイントで探しに行きます。よって、ページをバーーッと早くスクロールしても、だいたいどこに何が書いてあるかわかるようなデザインになっていると便利です。
アイキャッチ
そこで重要になるのがアイキャッチです。
アイキャッチとは、色やイラスト、タイポグラフィなどを用いて、縦に長いページの中に目の引っ掛かりを作ります。
目の引っ掛かりを作ることで、注目ポイントや見出しをわかりやすくユーザーに伝えます。
プライオリティとカテゴライズ

テキストは、重要度に合わせてフォントサイズや太さを調整し、読まずともどの内容が重要か、また見出しと本文の区別を伝えます。
申し込みボタンなどのCTA(Call To Actionの略)は、色やサイズを目立たせることでページ内のどこにボタンがあるのかを伝え、必要なときにすぐ押せるようにします。
そしてWebデザインで最も重要なのがカテゴライズ。
カテゴライズは「どこまでが1つの情報か」を視覚的に伝えることです。Webサイト(特にトップページ)は、様々な情報が掲載されることが多く、カテゴライズがされていないユーザビリティの低いサイトは、ユーザーがすぐに離脱してしまいます。
情報をカテゴライズするには、罫線や囲み線などを用いることがありますが、最近はスペースを効果的に使ってカテゴライズするデザインが多いです。
罫線や囲み線が多くなると、ページ内の要素が増えデザインがゴチャゴチャした印象になります。スペースを使うことでスッキリと見せることができますし、読みやすくなります。
学習方法
Webデザインの構成力を身につけるには、Webデザインポータルサイトを見るのがおすすめです。ポータルサイトには、最新のデザインがたくさん掲載されています。これらのサイトを利用者視点で見ると、上述の内容が理解できると思います。
おすすめのWebデザインポータルサイト
https://io3000.com/
https://muuuuu.org/
https://www.webdesignclip.com/
私が思うステキなWebデザインは、変則的なレイアウトであっても、バリバリ動きがついていても、ユーザーがやりたいことがすぐ実現できるデザインです。それにはUIの視点とともに、ページ全体をどう構成するかという構成力がとても重要です。
阪口英基
Webデザインの課題はクーシーが解決します
-
Webサイトデザイン
EC、コーポレート、eラーニング、SNS、基幹システムなどあらゆるジャンルのWebサイトを手がけています。
-
コーポレート
サイト制作各ステークホルダーに合わせて情報設計を行い、企業のブランディングが伝わるデザインを心がけています。
クーシーのWeb制作実績
-
難解サービスを再構築。
アイディア コーポレートサイトアイディア株式会社は、海事産業界向けプラットフォームの開発・運用を行うスタートアップ企業。収集した膨大な航海データを活かして航海支援スマホアプリ「Aisea(アイシア)」を小型船舶向けに提供。本プロジェクトでは、コーポレートサイトおよび「Aisea」サービスサイトのリニューアルを手がけました。
記事を読む
-
国内最大手「辻・本郷 税理士法人」
コーポレートサイトリニューアル辻・本郷 税理士法人は、北は北海道から南は沖縄まで国内60拠点以上を展開する国内最大手の税理士法人です。法人/個人、医療・公益法人・地方公共団体といった様々な顧客に向けて会計・税務顧問業務をはじめ、事業承継、組織再編、M&Aアドバイザリーなど幅広いサービスを提供しています。本件では、同法人のコーポレートサイトをリニューアルしました。
記事を読む
-
リビングから「注文住宅」相談。
NTTデータ・スマートソーシング
「HOME4U 家づくりのとびら」「HOME4U 家づくりのとびら」は株式会社NTTデータ・スマートソーシングが新事業として展開する、注文住宅のオンライン相談サービスです。PC/スマートフォンから注文住宅の疑問や不明点を専門アドバイザーに相談し、理想の住まいづくりを叶えることができます。
記事を読む