シノダマナのポートフォリオ

  • HOME
  • WORKS
  • 風景撮子写真展-nostalgraph-公式サイト

風景撮子写真展-nostalgraph-公式サイト

  • WEBデザイン
  • コーディング

種別 : Website | 課題制作 公開 : 2024.11 URL : https://intp.site/2530/nostalgraph/

職業訓練校の課題「ワンカラムのWebサイト制作」にて、架空のフォトグラファーの写真展のWebサイトを制作しました。写真展のコンセプトである「ノスタルジー」な雰囲気を感じること、見やすくシンプルなデザインを目指しました。

風景撮子写真展-nostalgraph-公式サイトのサムネイル画像(大)
ターゲット
  • フォトグラファーのSNSのフォロワー
  • 写真が好きな方
  • 展示会などによく行く方
課題
  • 情報発信がSNSのみのため、認知度が偏っている
  • SNSだけでは写真展のコンセプトを伝えきれない
目的
  • SNS以外からの認知度を増やし、写真展を足を運んでもらう
  • SNSのフォロワーに写真展のコンセプトを理解してもらい、写真展へ足を運んでもらう
情報設計

FVで全画面に写真を載せることでインパクトを与え、写真展のタイトルや会期、会場などの情報もすぐにすぐに分かるようにFVに載せています。SNSのフォロワーにも写真展開催の意図を知ってもらうため、FVの下にはフォトグラファーのメッセージを設置しました。写真は単調にならないようグリッドレイアウトで配置しています。

デザイン

「ノスタルジー」をテーマとした写真展のため、写真は彩度を低めに統一しました。黒背景に白枠をつけることで、アルバムのような雰囲気を作り上げました。フォトグラファーの作品として掲載している写真は全てわたしが過去に撮影してきた写真を使用しています。メニューの文字はホバーすると滲むような動きにしています。背景にクラフト紙のテクスチャーを引き、懐かしさを感じさせるデザインを目指しました。

制作期間
  • 企画、設計:15H
  • WF:3H
  • デザインカンプ:5H
  • コーディング:25H
使用ツール
  • Figma
  • Illustrator
  • Photoshop
  • VSCode ( HTML / CSS / jQuery )
「風景撮子写真展-nostalgraph-公式サイト」のPCサイズのスクリーンショット画像
「風景撮子写真展-nostalgraph-公式サイト」のSPサイズのスクリーンショット画像

WEBサイトをみる

お問い合わせ

m66.shinoda@gmail.com

お気軽にご連絡ください!