HP制作 | フォトグラファー様ホームページ(自主制作)

制作概要

□ 制作期間：約1ヶ月

□ 制作範囲：

　　① 要件整理(案件内容の検討・ペルソナの設定・ユーザーストーリーの検討を含む)

　　② コンテンツ内容の検討

　　　(コンセプトの検討・画像の選定・ライティング・ワイヤーフレームの作成含む)

　　③ ビジュアルデザイン

　　④ コーディング(HTML/CSS・jQuery)

　　⑤ サーバーアップ

□ 制作物：ワイヤーフレーム・デザインカンプ・コーディングファイル

□ 使用ツール：Photoshop・VisualStudioCode

実際のサイトへ

Webサイトのスクリーンショット

要件整理

(架空案件のため実在するカメラマンをイメージしながら自分で想定)

□ クライアントの事業内容

• 全国出張フリーランスカメラマン
• 婚礼撮影や前撮り・家族写真の撮影を行う
• 現在の集客はInstagram、ホームページは持っていないため新しく作りたい
• 「写真から愛が伝わりますように」という想いを持ち、ただ写真を撮るだけではなく撮影している時間も楽しんでもらいたい、そんな考え方を持って活動している

□ サイトを作成する目的

【 最終ゴール：お問い合わせを増やすこと 】

• Instagramで興味を持った方に向けて情報をわかりやすくお伝えしたい
• 大切な場面での撮影を依頼するため比較検討している方が多い。その方に向けて自分の想いやサービス内容をよりしっかり知ってから検討して欲しい
• InstagramのDMにハードルの高さを感じている人もいるためもっと気軽に問い合わせしてほしい

□ ターゲット

• 20〜30代女性
• 自然体な表情を切り取って欲しいなど想いやこだわりが強い
• インスタ映えよりかはその空間に愛やあたたかさを求めている人

□ サイトのタイトル

愛が伝わる写真を残したい ー木村 蒼  kimura souー

□ 届けたい人に伝えたいこと

• 事業に対しての想い
• 写真の作例や撮影プランなど必要な情報

□ 見た人にこんなふうに感じてほしい

• こんなに思ってくれるならわたしたちもこの人に撮って欲しいかも
• 写真を撮られるのは苦手だけどこの人になら楽しく撮ってもらいそう
• 安ければ良いと思っていたけどせっかく写真を撮るなら素敵な時間にしたい
• 私たちが撮ってもらったらどんな写真に仕上げてくれるかな

デザインイメージ

□ 写真

笑顔あふれる、あたたかくて愛が伝わる写真を多く取り入れる

言葉はなくても感情が伝わる写真選びを心がけました

□ 配色

• 海に夕日が沈んでいく景色をイメージしてメインカラーやアクセントカラーを検討
• 上記のようなあたたかくて心が動かされる感動的な景色が、この方の人柄や想いに近いと感じそのイメージで配色を考えた

 □ ロゴ

• 海に夕陽が沈んでいく景色をイメージして作成

□ 言葉選びもていねいに

• カメラマンだけど人柄を知ってほしい気持ちがあったため、言葉選びやライティングにも工夫をした
• メインビジュアルやローディング部分のキャッチコピーだけでなく、各セクションの見出しについてもあえて英語は使用せず、「ぼくの想い」や「ものがたり」など愛を感じる言葉を選んだ

□ 操作性への工夫

• カードデザインの部分などはボタン以外をクリックしてもページ推移ができるようボックス全体にリンクを設定→ホバー時に挙動がわかるようにした
• 「よくある質問」のアコーディオンメニューや、スマホ時のハンバーガーメニューについては、矢印などのアイコン部分以外を押しても操作ができるように実装した
• スマホ時はホバーでの動きをつけることができないため、ボタンをわかりやすくするためにパソコン版と異なるデザインにした

□ その他工夫したこと

• ゆったりした印象を持ってもらうため余白は多めに、文字も気持ち大きめにした
• アニメーションの速度なども操作にストレスを与えない程度にゆったりめにした

制作物

□ デザインカンプ(Photoshopで作成)

□ ワイヤーフレーム(Photoshopで作成)