Web site

概要

京都にあるコーヒースタンド「Calm coffee」（架空）のWebサイト

担当範囲

デザイン / コーディング

制作期間

約30時間

使用言語

HTML / CSS / jQuery

目的 / ポイント

京都にあり、海外観光客も多く来店するコーヒーショップ。国内外問わずの集客が目的。不定期で開催しているワークショップも宣伝して、女性客にアピールしたい。コーヒーのこだわりは、淹れ方などを自分好みにカスタマイズできるところ。

コメント

伝えたいことをシンプルにまとめて白を基調とし、余白を多めに入れることで洗練された雰囲気になるようデザインしました。海外のお客様も多いため、メニューや住所などの基本情報タイトル部分は英語で統一しています。どのデバイスからでも崩れなく見やすいように、レスポンシブ対応済みです。

概要

自身のポートフォリオサイト（当サイト）

担当範囲

企画 / デザイン / コーディング

制作期間

約30時間

使用言語

HTML / CSS / jQuery / PHP

デザイン

制作物が見やすく映えるように白を基調とし、自分の好きな色をアクセントにしました（穏やかで美しい海を連想させるブルーグリーンと、優しく柔らかなピンク）。女性向けの繊細なデザインが得意であるため、欧文フォントもそれらしく、ファーストビューには美しく可憐な一輪の花を添えました。

コメント

誰もが見やすく、直感的に各情報へアクセスできるように意識してデザインしました。下層ページにはパンくずリストで現在位置を明確にし、各ページには画面追従するナビゲーションを入れ、見たい情報にすぐに移動しやすいように設計しています。どのデバイスからでも崩れなく見やすいように、レスポンシブ対応済みです。

概要

「有機野菜.com」（架空）のWebサイト（グループ制作）

担当範囲

企画 / デザイン / コーディング
デザインは全体的なブラッシュアップ・調整、レスポンシブデザイン、コーディングはヘッダーフッターなどの共通部分とABOUT・SHOPPING・CONTACTページ、全体の最終的な調整と修正を担当しました。

制作期間

3週間

使用言語

HTML / CSS / jQuery

目的 / ターゲット

有機野菜定期便の購入促進が目的。若い人にも購入してほしい・ネットで購入できるようにしたい。1番売り出したい商品は、毎月有機野菜が届く3ヶ月1万円の「お試し定期便」。ペルソナは自分と家族の健康に気を遣う20代後半〜30代の料理をする既婚女性で、新鮮な野菜や果物でスムージーを作って飲むのが好き。

コメント

スクールのグループ課題で制作したWebサイトです。デザインのポイントは、最も売り出したい「お試し定期便」の情報を自然な流れで各ページに配置し、「今すぐ購入ボタン」で誘導している点です。思わず押したくなるようなデザインとhoverの動きを意識しました。野菜が育つ大地の土色とビタミンカラーを基調としています。商品情報だけでなく、生産者の情報も豊富に入れることで野菜への真摯なこだわりを伝え、親しみやすくあたたかい雰囲気と安心感を演出しています。また、サイト内の一部イラストもIllustratorで制作しました。どのデバイスからでも崩れなく見やすいように、レスポンシブ対応済みです。

概要

「WCB CAFE」（架空）のWebサイト

担当範囲

コーディング

制作期間

5日

使用言語

HTML / CSS

コメント

書籍「1冊ですべて身につくHTML & CSSとWebデザイン入門講座」の配布素材を使用し、本で学習しながら初めて制作したWebサイトです。レスポンシブ対応済み。