works

フォトグラファー「mimio」
ポートフォリオサイト

職業訓練の自由制作課題で友人のフォトグラファーのポートフォリオサイトを作りました。ヒアリングからサイトの公開まで一通りの流れを自分で調べて実装しました。

クライアントである友人もこのサイトを気に入ってくれて、さらにこのサイトを見たお客様から2件の撮影依頼に繋がり、このサイト制作の目的である”案件の獲得”を達成いたしました。

制作日数

3週間

制作の流れ

1. STEP1
   ヒアリング
   ヒアリングシートを活用し、強みや今後達成したい目標を明確にしました。現在子供支援施設の中で月に2回キッズフォトを開催していて、そのお客様を個別にロケーション撮影に繋げたいという目標を達成させるためのサイトを作ることにしました。ペルソナは、２～３歳の子供を持つママさんに設定。
2. STEP2
   ワイヤーフレーム
   紙に手書きでワイヤーフレームを作成しました。
3. STEP3
   素材の編集（Illustrator・Photoshop）
   サイトのタイトルロゴはillustrator。素材の切り抜きなどはPhotoshopでしました。
4. STEP4
   デザインカンプ（AdobeXD）

   ベースカラーを白にしてアクセントにブラウンを配色。写真が際立つようにシンプルな配色にしました。フォントも細めのGoogleフォントを使用し綺麗な印象に。

   ペルソナはママさんで、子供多めのデザイン。しかし、7割のお客様がトップページのウエディングの作品を見て撮影を依頼してくれるということで、トップのイメージはウエディングからキッズフォトに3枚移り変わる仕様にしました。

5. STEP5
   コーディング

   HTML、Sass、Javascriptを使ってコーディングしました。

6. STEP6
   公開

   クライアントである友人にレンタルサーバーとドメインを契約してもらい、公開しました。はじめは駆け出しのフォトグラファーということもあり、無料のサーバーを検討していましたが、SSLの暗号化ができないなどのデメリットを伝え、最終的にはロリポップの格安プランを契約してもらいました。

7. STEP7
   OGP・分析ツールの設置

   SNSや公式LINEでの発信を想定しファーストビューの画像をOGPに設定しました。

   Googleアナリティクとサーチコンソールを導入しました。1週間に約300人の方がサイトに訪れてくれました。今後はサブページの閲覧数を増やすためにトップページからの誘導が課題です。