【 WEBデザイン 】 実務経験なしの人のためのポートフォリオ制作フロー2 FirE♯510

実務経験なし場合のポートフォリオ制作第二弾です。

前回は、想定クライアント情報を設定し、
WEBサイトの目的と、ターゲットの情報を整理して、デザインへどのように反映させるかを書き出しました。

■ クライアント情報設定

＜屋号＞
クローバー法律事務所

＜住所＞
〒569-0067 大阪府高槻市桃園町2番1号072-674－1234

＜概要＞
創業40年親の代からの営業。現在2代目（41歳・独身）。
不動産売買の手続きやトラブルに強く。自身も不動産物件を多く所有する。堅実な仕事には定評があり、固定客を数多く持つが、親の代からの引き継ぎのため高齢化や代替わり時に離れていった顧客があるため会社としての成長は止まってしまっている。

＜商圏＞
大阪・京都を中心に関西一円

＜サイト作成の目的＞
新規顧客の確保。特に遺産相続（終活）を考えている顧客を持ちたい。まずは「お問い合わせ」「無料相談」などの電話での問い合わせ件数をWebサイトで得たい。

＜ターゲット情報＞
70歳後半で終活に興味を持っている男性。資産は4000万～5000万。
子供が3人おり。自らの死後遺産相続による争いは避けたいと考えている。妻は昨年他界。それによって終活を考えるようになった。足が少し悪く、積極的に出かける回数が減った。長女が頻繁に来てはくれているので日常生活は問題ないがそれも申し訳ないと思っている。

このようなクライアントのWEBサイトの設計をしていきます。

■ サイト設計

① コンテンツ策定：ターゲットが求めているコンテンツは何か？
② デザインコンセプト：サイトカラー・雰囲気
③ サイトマップ作製：サイトの構造・ページ数決定
④ その他：SEO 対策・キーワード設定

サイトの設計を行う上で、必要な項目です。

今回のクライアントに当てはめていきましょう。

① コンテンツ策定

WEBサイトのコンテンツとは、WEBサイトに載せる情報全てを指します。
つまり、画像、動画、テキスト、ブログなどになります。

今回の、クライアントの場合は、
信頼確保のための、創業40年の歴史。
代表の写真つきのご挨拶。
遺産相続（終活）を得意分野として打ち出すエリア。
信頼・安心を担保する実績や、事例、利用者の声。
問い合わせ増加のための問い合わせボタン、フォームの。
ターゲット（高齢者）のためのわかりやすいイラスト。
敷居を低くするための無料相談、その後のセールスはないという安心感。
問い合わせから依頼までの流れを詳しく載せる。
来所の煩わしさの解消。
フォーム入力等の煩わしさの解消のための電話でも対応可能表記。
わかりやすいナビゲーション。
人間味の伝わるブログ記事。
・・・

この辺りでしょうか。
追加の可能性ありですね。

② デザインコンセプト

サイトカラー
雰囲気

コンセプトは、ターゲットと、サイトの目的・役割から、導いていきます。

また、その業種の”らしさ”の演出も必要です。

ターゲットは、資産をもつ高齢者です。
お金の心配はほぼなく、自分の子どもたちが、自分の亡き後にトラブルなく幸せに暮らして欲しいという思いがあります。

このようなことから、「やすい！」という印象よりも、「信頼できる」ことの方が、重要です。

「信頼」の印象を与えるカラーとして、ブルー系で、さらに落ち着いた印象を与える、濃いめのブルーを取り入れたいと思います。

このようなカラー配置にします。

▶︎ WEBサイトのカラーの配分
　メインカラー　　　70%
　ベースカラー 　　　25%
　アクセントカラー 　5%

トーンを落としたホワイトを基調として、濃いめのブルーをベースカラーに配置します。
アクセントカラーが2色ありますが、明るいブルーは、ベースカラーの同系色にして、ポイントで使用します。
オレンジ系のアクセントカラーは、ボタンなどの目立たせたいパーツに使用します。

デザインをしていく中で、若干の変更はあるかもしれませんが、まずはこれで配置します。

③ サイトマップ作製

WEBサイトの構造を考えていきます。

TOPページ（ / ）
　・MV 画像全面＋大きめテキスト (.mv)
　・ご挨拶　 (.greeting)
　・得意分野 (.recommend)
　・業務案内 (.service)
　・無料相談からのフロー (.flow)
　・無料ご相談の案内 (.contact)
　・ニュースリスト  (.news)
　・ブログリスト (.blog)
　・アクセス (.access)
　・無料ご相談の案内 (.contact)

階層ページ　７ページ
「事務所概要」 （ /page-about.php）
「業務案内」（ /page-service.php）
「料金案内」（ /page-price.php）
「解決事例」（ /page-works.php）
「無料相談」（ /page-contact.php）
「ブログ」（ /page-blog.php）ー　記事ページ（ /single.php）
「ニュース」（ /page-news.php）ー　記事ページ（ /single.php）

このような形の構成にします。
進行中に変更の可能性ありです。

WordPressでの構築を行う予定で組んでいますが、これもCMSなしの可能性ありです。

④ その他：SEO 対策・キーワード設定

キーワードはこちらにします。

遺産相続
終活
相談
大阪

【 つづく 】

今回は、サイト設計等を行いました。

次回以降は、これを元にしてデザインをしていきます。