FEATURE

職業訓練校で制作した作品の説明です。

サイト名:
CYW soy lights
https://yuimakino-pf.com/cywsoylights

担当:
Design / Coding (Responsive)

コメント:
架空のソイキャンドルのD2Cブランド、CYW soy lightsのECサイトです。

職業訓練校での課題作品として制作しました。

◆使用ツール:HTML/CSS/jQuery/Photoshop/Illustrator/Dreamweaver
◆制作期間:2週間

制作フロー
①コンセプトシート作成(ペルソナ策定) ②サイトマップ作成 ③ワイヤーフレーム作成 ④コーディング ⑤サーバーアップロード

①どのような企画にするか明確にするために、
「・扱っている商品 ・サイトの目指すゴール ・ペルソナ ・商品の特徴」
を記載したコンセプトシートを作成しました。

②情報量が多いことを想定し複数ページを作成することに決め、ディレクトリ構成を明確にするサイトマップを作成しました。

③コンテンツのレイアウトやロゴを想定し、ワイヤーフレームを作成しました。
(手書きで乱雑なので恥ずかしいですが、クリックで拡大できます、、!)

④HTML/CSS/jQuery を用いてコーディング、Photoshop/Illustrator を用いてアイコン作成や画像編集を行いました。

⑤ロリポップでレンタルサーバーを契約し、Dreamweaverを使用してサーバー上に公開しました。

このようなデザインにした意図

カラー:
ターゲットを主に女性を想定したので、親しみを感じやすいオレンジを基調とし、柔らかさや落ち着きを表現できるよう彩度の低い色使いで統一しました。
主に使用した色:#e8b879#f3cc6f#69af86 など

テキスト:
フォントは丸ゴシック体を使用し、小さめの文字とひらがなを多用することによって女性らしさや繊細さを表現しました。

レイアウト:
トップページでは堅い印象を与えることは避けたかったので、テキストやオフジェクトをあえてランダムに配置しました。他のテキストやオブジェクトとの差別化、遊び心、また視覚的にわかりやすく押してみたくなるよう、それぞれの下層ページにリンクするアイコンのボタンをふわふわと揺れるようにしました。
下層ページは文章が読みやすいように、シンプルな構成になっています。

WORKS

Web(デザインとコーディング)制作の記録です。
デザイン練習用の架空サイト(ファーストビューのみ)も含んでおります。

ABOUT

10年間美容師として従事した後、地方からの転居を機に働き方を考えるきっかけとなり、私生活をより充実させる、またコミュニケーション能力を活かせる点ということを軸に受付業務やカスタマーサポートへ転職しました。
並行して以前から興味があったwebデザインの勉強を独学で始めたところ、時間を忘れるくらいのめり込み、「デザインをする」「自分でゼロから創り出す」ことが好きだと再認識しました。
本格的に知識を習得したいと思い、2020年11月から職業訓練にてwebデザイン科を受講し、改めてwebデザイナーになりたいと強く決意しました。

趣味・好きなもの:
犬(ボストンテリアを飼っています)、海外ドラマ・映画鑑賞、たまに料理

SKILL

HTML5/CSS3

基本的な構造を理解し、コーディングができます。まだまだ調べることも多く勉強中です。

jQuery

一からスクリプトを書くことはできませんが、実装し簡単な編集ができます。

Photoshop

画像編集、色調補正など、基本操作ができます。

Illustrator

アイコン、ロゴ作成などができます。

Dreamweaver

コーディングやサーバーへアップロードする際に使用しています。

How do I study?

・職業訓練校 ・ドットインストール ・Progate
<参考書籍>1冊ですべて身につくHTML&CSSとWebデザイン入門講座 / HTML5&CSS3しっかり入門教室 ゼロからよくわかる、使える力が身につく。 / Webデザイン良質見本帳 目的別に探せて、すぐに使えるアイデア集 等

All icons made by Freepik from www.flaticon.com

CONTACT

お問い合わせは、
SNSかメールでお願いいたします。

makino8214@gmail.com