Nana Sato Portfolio

cafe azito

コンセプト

現状のサイトで抱えている下記問題点を解消するため、サイトのリニューアルを行いたい。

• （問題点）

• ・レイアウトが単調。
• ・情報が取得しにくい構造になっている。
• ・グローバルメニューがわかりづらい。

ターゲット

主に20代後半～30代の女性。海外のリゾート地にいるかのような空間づくりを目指している。
旅行に行きたくてもなかなか時間がとれない、という方に来店して欲しい。

制作ポイント

【レスポンシブ非対応】
訓練校の課題として、実在するサイトのリニューアルを想定して制作しました。（架空のサイト）
既存サイトでは多くの情報を無理にシングルページにまとめている印象があったため、情報を7つのセクションに整理し、各セクションに下層ページをもたせる構造に変更しています。
店内カラーの青と白を取り入れ、海岸の爽やかな風を感じられるデザインを心掛けました。

制作時間

42時間

担当範囲

ワイヤーフレーム、デザイン、コーディング

使用ツール

XD、Photoshop、HTML、CSS

NEXT ONE

コンセプト

現状のwebサイトでは文章のみのコンテンツが多くデザイン性に欠ける内容となっているため、 より多くの人の目に留まるようリニューアルを行いたい。

ターゲット

web業界関係者やwebサイト制作に興味をもっている方。どのような企業かということを知ってもらいたい。

制作ポイント

訓練校の課題として、実在するサイトのリニューアルを想定して制作しました。（架空のサイト）
写真を取り入れることでweb業界に関連した雰囲気が伝わるようにし、また視線の流れが単調にならないようレイアウトを工夫しました。
コーディング時はレスポンシブデザインを意識し、どのようにマークアップを行うかなどあらかじめコーディング設計を考え取り組みました。

制作時間

56時間

担当範囲

ワイヤーフレーム、デザイン、コーディング

使用ツール

XD、Photoshop、HTML、CSS

ごはんや むすび

コンセプト

素材を大切にしている定食屋さん。小さなお店であまり認知されていないため、webサイトを開設することでたくさんの人にお店を知ってもらいたい。また、インスタグラムもフォローしてもらいたい。

ターゲット

温かいごはんが食べたい人。食材の産地にこだわりたい人。
一人暮らしで家庭の味から離れている人や、忙しくて自炊の時間が取れていない方。

制作ポイント

訓練校の課題として、制作しました。（架空のサイト）
サイトを訪れてすぐお店の雰囲気が伝わるよう、メインビジュアルを大きく配置し、ごはんがメインの写真をスライド形式で複数表示させました。テキストの縦書きや縦の動きを取り入れることで「和」を連想させるサイトづくりを心掛けました。
コーディングではデザイン時に考えた余白を忠実に再現できるよう気を付けて取り組みました。

制作時間

46時間

担当範囲

ワイヤーフレーム、デザイン、コーディング

使用ツール

XD、Photoshop、HTML、CSS

shim FARM

コンセプト

志村さんが経営している農園のwebサイト。これまでは高齢の志村さん一人で経営していたところへ孫が加わり、野菜の収穫量が増え提供できる商品が増えたことから、オンライン販売を行うことに。オンライン販売のスタートにあわせてwebサイトをつくることになった。

ターゲット

食材に気を遣いたい、健康志向の方。小さいお子様がいる家庭。

制作ポイント

【レスポンシブ非対応】
訓練校の課題として入校から1か月半の頃に制作したもので、指定されたワイヤーフレームをもとにコンセプト・ターゲットを自分で設定し制作しました。（架空のサイト）
美味しい野菜を食べて元気に過ごしてもらいたい、という生産者の想いを伝えるべく、全体的に明るいイメージにしています。また余白と視線誘導を意識し、読みやすいサイトづくりを心掛けました。

制作時間

36時間

担当範囲

デザイン、コーディング

使用ツール

Photoshop、HTML、CSS

Golden Craft

コンセプト

大学で出会ったビール好きの同級生たちが集結して立ち上げた醸造所。多くの人にビールを飲んでもらいたいのでオンラインショッピングができるwebサイトをつくりたい。

ターゲット

ビール好きはもちろん、お酒が好きな方。来店が難しい人にも商品を届けたい。

制作ポイント

【レスポンシブ非対応】
訓練校の課題として制作した、クラフトビールのプロダクトサイトです。（架空のサイト）
プロダクトサイトとして各商品の紹介ページを作成することを目標に取組みました。商品の紹介ページでは、商品の紹介写真が複数あることを想定し、サムネイル画像をクリックするとメイン画像と写真が入れ替わる形式を取り入れました。

制作時間

40時間

担当範囲

ワイヤーフレーム、デザイン、コーディング

使用ツール

XD、Photoshop、HTML、CSS

CAFE CAMP FESTIVAL 2021

コンセプト

架空のイベントの告知用webサイト

ターゲット

キャンプが好きな人、キャンプに興味はあるが経験がない人。子供にいろんな経験をさせたいと考えている子育て世代の方。

制作ポイント

【レスポンシブ非対応】
訓練校で学び始めて1か月過ぎの頃に、課題として初めて制作したwebサイトです。（架空のサイト）
指定されたワイヤーフレーム、コンセプト、原稿をもとにデザインを考え、コーディングを行いました。
デザイン面では基本の整列、近接、対比に注意して取組みました。コーディング時は、デザインで注視した整列、近接、対比をそのままwebサイトに再現できるよう意識しました。

制作時間

30時間

担当範囲

デザイン、コーディング

使用ツール

Photoshop、HTML、CSS

WSS

コンセプト

自社のwebサイトを見て認知してもらい、学校説明会への参加者数、訓練校への申込者数を増やしたい。現状のwebサイトが無機質な印象で階層も複雑化しているので、どのような学校なのか雰囲気が伝わるwebサイトにリニューアルしたい。

ターゲット

web業界への就職・転職を検討している、web業界に興味をもっている方。男女問わないが、いままで学生の8割が女性で、どちらかというと女性向けかと思う。

制作ポイント

【レスポンシブ非対応】
訓練校にてコンペ形式のグループワーク課題として、実在するサイトのリニューアルを想定し制作しました。（架空のサイト）
主にコーディングを担当しましたが、クライアントの意向に沿ったサイトを作り上げることができるよう、ディレクター担当とともにクライアントとの打合せにも参加しました。また初めて2名体制でのコーディングを経験し、自分以外の人でも内容がわかりやすい記述を意識しながら取組むことができました。

制作時間

80時間

担当範囲

コーディング

使用ツール

HTML、CSS

あづまスポーツ整骨院

コンセプト

開院し半年経ち徐々に固定客が増えてきたが、もっと認知度を上げるためwebサイトを開設することにした。

ターゲット

スポーツ障害に悩んでいる方、整骨院を探している方

制作ポイント

Wordpressを使用したwebサイト制作の練習として制作しました。（架空のサイト）
どのような施術に対応している整骨院なのかわかりやすいように、情報を多く載せることができるようテーマを選択し制作しました。Wordpressの練習をメインとしていたため、お問い合わせフォームやブログページ等の機能を盛り込んだサイト制作を目指し取組みました。

制作時間

20時間

担当範囲

コーディング

使用ツール

Photoshop、Wordpress

自身のportfolioサイト

コンセプト

自身のポートフォリオサイトとして、人柄を表現したい。名前の「なな」に因んで、七色を散りばめたい。

ターゲット

自身に興味をもってくださっている方。

制作ポイント

絵本のようにカラフルでわくわくするような雰囲気を表現したく、オープニングアニメーションとナビゲーション部分にページめくりを連想するような動きを取り入れ、スクロールにより背景色が変わることでページが変わったかのような印象が出せるよう演出しました。
また落ち着いた色味を取り入れることで、幼稚にならないようにしました。

制作時間

150時間

担当範囲

ワイヤーフレーム、デザイン、コーディング

使用ツール

XD、Photoshop、HTML、CSS

美髪 -mikami-

コンセプト

40代夫婦が経営する美容室。いままでSNSでの情報発信のみでwebサイトは開設しておらず、そもそもどのようなお店なのかを世間に知ってもらうべくwebサイトを作ることにした。

ターゲット

20代後半〜の男女。髪のツヤ・ハリを取り戻したいと思っている方。落ち着いた雰囲気の美容室を探している方。

制作ポイント

コーディング練習のため制作しました。（架空のサイト）
お店のことをまず知ってもらいたいという希望のため、お店のコンセプト・施術内容を上部に大きめにレイアウトしています。
お客様の声のセクションを設け、店内カラーを意識したデザインを施すことで、店内の雰囲気が伝わるサイトを目指しました。
コーディング面ではミックスインを活用した記述を心がけました。

制作時間

36時間

担当範囲

ワイヤーフレーム、デザイン、コーディング

使用ツール

XD、Photoshop、HTML、CSS