【初心者向け】webデザインレイアウトは目的別に6パターン覚えればOK

【初心者向け】webデザインレイアウトは目的別に6パターン覚えればOK

タカハシサトシです!

地方で10年、企画の仕事をしています。
その前は10年、デザインの仕事をしていました。

今回は、

webデザインのレイアウト
どう使い分けたらいいか悩みます

という声にお答えします。

この記事はwebデザイン初心者さんに向けた、webデザインのレイアウトについての解説記事です。

初心者さん向けなので結構ざっくりですが・・・
webデザインは6つのパターンに分けられるので、どんな時に使い分けるのか、まずは把握すると良いでしょう。

しかし、それは机上のお話。実際の案件ではどうでしょうか。

本記事の内容

1 【初心者向け】webデザインレイアウトは目的別に6パターン覚えればOK
2 実際のwebデザインレイアウトはシングルカラムのみ? 

では、見ていきましょう!

1 【初心者向け】webデザインレイアウトは目的別に6パターン覚えればOK

【初心者向け】webデザインレイアウトは目的別に6パターン覚えればOK

・シングルカラム
・2カラム(右サイド)
・2カラム(左サイド)
・3カラム
・カードタイプ
・ノングリッド

以上の6つを覚えましょう!

シングルカラム

シングルカラム

大体が、以下のwebサイト制作の場合に当てはまります。
コンテンツ量が少なく、場合によってはトップページで終わります。

・小規模のWebサイト
・商品紹介ランディングページ
・申し込み等に導入するランディングページ
・ウェブサービスサイト

2カラム(右サイド)

2カラム(右サイド)

横書きテキストのサイトである限り
左上から右下へと見ていく事になります。

そういった意味では、
コンテンツをしっかり見せたい場合は
このレイアウト。

ナビゲーションが邪魔にならないので、コンテンツをストレス無く読むことができます。また、そのコンテンツ内容に興味があったら、それをきっかけに他のページへ促すような性質のサイトになるでしょう。

コンテンツ量は多いタイプのサイトで、ブログやオウンドメディアに最適。

2カラム(左サイド)

2カラム(左サイド)

上記と違って、ナビゲーションを見せたい場合のレイアウト。

ナビゲーションは、サイトの目次。
なので、このサイトはどんな構成なのか、全体像を見せたいし見てほしい。

つまりは、いろいろなページを回遊するタイプのサイトになります。
楽天やAmazonなどECサイトにも多いです。

また、コンテンツ量が中規模程度のサイトでは、下層ページのサブナビゲーションとしてこのレイアウトを採用する場合もあります。

3カラム

3カラム

ページの上下左右にナビゲーションが配置できるので、自ずと多くの情報を整理して見せていくサイトに最適です。

Yahoo等各種ポータルサイトや、観光情報、グルメ情報など、ジャンルに特化したポータル、またはFacebookなどのPC版SNSサイトなどもこのようなレイアウトになっています。

カードタイプ

カードタイプ

YouTube等動画サイトや、写真素材サイト、ポートフォリオサイト等
写真や動画を並べて見せる事に最適なレイアウト。

ノングリッド

ノングリッド

プレゼンテーション性の高いサイト。
基本はシングルカラムの中に、自由にレイアウトする。

メンテナンス性は低い。
期間限定でメッセージ性を高めたいサイトには最適。

僕は案件として提案したこともないけど・・・。

—————

以上、パターンを覚えればOKです。

2 実際のwebデザインレイアウトはシングルカラムのみ?

実際のwebデザインレイアウトはシングルカラムのみ?

【結論】まずはシングルカラムで提案を考えるべし

僕のような副業・フリーランスが前提ですが、なぜなら直請けするクライアントさんは

・地域の小規模クライアント
・新事業の試験的なサイト
・オウンドメディア

上記のような案件ではないでしょうか。
むしろ、こういった案件は特にフリーランスの出番だと思います。

クライアントさんにとって、
がっつりとしたサイトを作るのは、
予算も時間も必要でリスキー。
まして個人に依頼するのは怖い。

制作サイドも体制が必要なのでチームで請け負う必要があるし、個人には荷が重い。お互いにリスキーです。

理想は、低リスク高スピードで、すぐに小さく始めて試したいはず。

それでオープンさせ運用スタート、何かつかみがあったら広げていくというシナリオまで提案すれば、お仕事につながるかもしれません。

まずは始めるためのサイトづくり

そういう意味で、シングルカラムのシンプルなサイトを提案すればOKです。

提供する内容としては

・webデザイン(シングルカラム)
・WordPressテーマカスタマイズ前提
・トップページ
・下層5ページ以内
・お問い合わせ

くらいのシンプルな仕様で、他はオプションを用意しておけば良し。

大切なのはヒアリング

案件受注後に提案するwebデザインはシングルカラムで良いとして、一番大切なのは、最初の打ち合わせになります。今はリモートかもしれませんが、できることなら直接会話をしたほうが良いです。

なぜなら、会話することでお客様自身も見えていなかった目的や目標、コンセプトのヒントが現れる場合があるから。これは、会話の中で重要な質問のテクニックがあります。

ポイントを簡単に言うと

・だれが
・だれに
・なにを
・どうしたい

基本上記の4つを会話の中で模索することです。
webサイトをつくる理由や動機、一体何が問題だと感じているのか。
深いところまで汲み取ることができれば、良い提案につながるでしょう。

また、営業活動を行う場合は、こちらからの一歩的なお押し売りは逆効果です。理想は、相手から「ぜひ提案してほしい」と言ってもらえるか。

webデザインの提案につなげるためのヒントを聞き出すにはどのように会話すると良いのか。どうすれば相手が提案を望む状況を作れるのか。
詳しくは以下でまとめてお伝えします。

⇒webデザインの仕事を直クライアントから受注する営業テクニック(準備中)

まとめ:webデザインレイアウトは6パターン、そして提案から学ぼう

webデザインレイアウトは6パターン、そして提案から学ぼう

まずはwebデザインのレイアウトパターンを学んだら
実際の提案に活かしてみましょう。

重要なのはwebサイトを制作する目的ですので、その目的を果たせるようなwebデザインのレイアウトを選び、情報を設計していきましょう。

クライアントさんの目的を果たすために一生懸命制作した思い(提案)は伝わるはず。

関連記事

  1. 最新webデザインの参考はPinterestがおすすめ【海外に学ぼう】

    デザイン

    最新webデザインの参考はPinterestがおすすめ【海外に学ぼう】

    タカハシサトシです!地方で10年、企画の仕事をしています。その前は1…

  2. 企画書のデザインこそデザイナーの仕事【企画はデザイン思考】

    デザイン

    企画書のデザインこそデザイナーの仕事【企画はデザイン思考】

    こんにちは、タカハシサトシです!地方の飲食業界で企画の仕事をしていま…

  3. webデザインカンプで契約するかどうか決まる理由

    デザイン

    webデザインカンプで契約するかどうか決まる理由

    タカハシサトシです!地方で10年、企画の仕事をしています。そ…

 

コラムのまとめ記事

  1. 【初心者向け】タスク管理(todo)の始め方〜目標の作り方・目標達成のコツを解説

    コラム

    タスク管理の始め方・目標をつくり挑戦しよう

    タスク管理を始めたい方向けの記事です。また、目標の作り方とタスク管理を活用した目標達成のコツを初心者にも優しく解説しています。

  2. webデザインの始め方・学びながら挑戦しよう

    コラム

    webデザインの始め方・学びながら挑戦しよう

    webデザインを始めたい方向けの記事です。本質を知り、独学やスクールで学び、プロの仕事に挑戦しよう。

  3. マーケティングの始め方・集客を学び挑戦しよう

    コラム

    マーケティングの始め方・集客を学び挑戦しよう

    マーケティングを学びたい方向けの記事です。マーケターを目指し、集客に挑戦しよう。

  4. 新しい事業の始め方・企画づくりに挑戦しよう

    コラム

    新しい事業の始め方・企画づくりに挑戦しよう

    企画職の方、また企画の仕事を目指している方へ向けた、まとめ記事です。企画職を目指し、事業を起こそう。

アーカイブ

PAGE TOP