【サイト制作】コインランドリー店
キャッシュレス派にやさしいコインランドリー店のポートフォリオサイトを作成しました。HTML、CSSでのコーディング、JavaScriptでプログラムを作成しています。デザインについてはPhotoshop、Illustratorを使用しています。
[ 目次 ]
■ 概要
■ 要件定義
■ 情報設計
■ デザインの意図
■ 実装機能
■ 概要
▼ スケジュール
１．要件定義
所要時間 ：2.00h
２．情報設計
所要時間 ：2.00h
３．ワイヤーフレーム作成
所要時間 ：15.00h
使用ツール：Adobe Illustrator
４．デザインカンプ作成
所要時間 ：15.00h
使用ツール：Adobe Photoshop
５．コーディング
所要時間 ：15.00h
使用言語 ：HTML
使用ツール：Adobe Dreamweaver
６．スタイリング
所要時間 ：15.00h
使用言語 ：CSS・SCSS・JavaScript・jQuery・PHP
使用ツール：Adobe Dreamweaver
■ 要件定義
▼ ペルソナ設定
・新社会人／学生
- 一人暮らしをしている方
- 家賃を抑えたいと思ってる方
- キャッシュレス生活をしている方
▼ サイトの目的
・「洗濯機を所有しない生活」という選択肢の提示
・当サービスの利用者の増加
▼ キーワード／イメージ
・気軽さ、ミニマル
■ 情報設計
▼ パンくずリスト
・ 常にトップページに遷移できる、現在の表示ページの階層が理解しやすい等のメリットからパンくずリストを設置しています。
▼ページ表示時のアニメーション
・コンテンツが増加しページの表示に時間がかかるようになった際の、ページの離脱率低下を狙っています。
▼ ローディング画面
・コンテンツが増加しページの表示に時間がかかるようになった際の、ページの離脱率低下を狙っています。
▼ 「ページ上に戻る」ボタン
・現在いる位置に関わらず、すぐにグローバルナビゲーションに到達できるように設置しています。
▼ 「News」ページ
・「重要」と「お知らせ」を分けて確認できるように、切替タブを採用しています。
・トップページ下部の「News お知らせ」セクションと当ページの内容に差異が無いように、別途プログラムを作成し一括管理できる設計にしました。
▼ 「Contact」ページ
・入力不備による送信を防ぐため、空欄を制御しています。
■ デザインの意図
▼ ヒーローイメージ
・当サービスのロゴを中央に表示、洗濯をイメージさせる泡のイラストを周囲に表示しました。
・周囲に配置した泡のイラストから順に表示させることで、数秒後に中央に表示するロゴの印象を強めています。
▼ ロゴ
・別ページに記載
URL：https://www.resume.id/works/a25e25c71fd57e9b
▼ グローバルナビゲーション
・敷居の高い印象を軽減させるため、波やしずくのイラストを表示しています。
▼ トップページ
・「Service サービス」
- 当サービスの強みをアピールするためページ上部に設置しました。
・「Voice 利用者の声」
- 利用後に持つ感想をイメージさせるために当セクションを作成しています。
- 内容は当サービスの強みをアピールするものを掲載しています。
・「How to ご利用方法」
- 段階を3つにまとめ、使い方の簡単さをアピールしています。
・「News お知らせ」
- 更新／メンテナンス作業が定期的に入っているサイトであることを強調するために、最新ニュース3件をトップページ内に掲載しています。
▼ 「Plan」ページ
・選べるプランが3つあることが直感的に分かるように、統一性を持たせたデザイン／3つのブロックを横並びに配置しています。
・視覚的に把握できるデザインのものをページ上部に、詳細が把握できるものをページ下部に設置することで、プランの大枠を把握した後に詳細を理解するという流れを1ページ内で完結できるようにしました。
▼「Cafe」ページ
・コーヒー／ゆっくりできる空間をイメージさせるために、当ページのみメインカラーに茶色を使用しています。
・大きいスイーツの画像を使用することで、味を想像しやすくさせる効果を狙っています。
▼「Contact」ページ
・来店することなくお問い合わせができるように、当ページを作成しました。
・必須項目のみアクセントカラーの黄色を採用することで、直感的に理解できるようにしています。
■ 実装機能
▼ パンくずリスト
▼ ページ表示時のアニメーション
▼ 「ページ上に戻る」ボタン
▼ ローディング画面
▼ トップページ下部の「News お知らせ」セクション表示制御プログラム
▼ 「News」ページのタブ切替プログラム