now loading

yuko nakano Portfolio Site

Works

  WEBサイト

 ECサイト

制作したECサイトのトップページのサムネイル画像

  使用したソフト
Photoshop / Adobe XD / visual studio code
  使用言語、CMSなど
HTML / CSS / JavaScript / PHP / symfony(ECCUBE4)
  コメント
美容と健康に関する商品を取り扱うECサイト。
ブランディング、企画、デザインとコーディング、プログラミングを担当。
ECCUBE4を使用し、デフォルトのテンプレートをベースにオリジナルテンプレートを作成し、サイトを構築。
関連する担当者の方々にヒアリングを行い、意見を取りまとめてブランディングや企画のすり合わせや相談を行いつつ意見を生かせるよう制作しておりました。
商品のメインビジュアルなどは、デザイナー数名に依頼し、その間UI設計やコーディング・プログラミングが必要な部分を担当。
ターゲットが40歳～60歳の女性という点から、メリハリがあるデザインや見えにくい文字は避けて見やすく操作しやすいように意識しました。
https://itscoco.shop/

 プロモーションサイト

制作したプロモーションサイトのトップページのサムネイル画像

  使用したソフト
Photoshop / Adobe XD / visual studio code
  使用言語、CMSなど
HTML / CSS / JavaScript / PHP / wordpress / Bootstrap
  コメント
ドラマのプロモーションサイトをwordpressを利用して、1からテンプレートを制作。
企画、デザインとコーディング、プログラミングを担当。
サイト運用担当者がHTMLを使用できない点から、カスタム投稿ページにてコンテンツを更新できるようにテンプレートを作成。
ターゲットは30代の男性。デザインはコントラスト強めにし、アクセントカラーでメリハリをつけました。
ドラマの濃いキャラクターを生かしたデザインになるよう、背景に大胆に人物写真を表示しています。
背景画像の加工はデザイナーと分業にて作業を行った形です。
https://wakuseismith.com/

 採用情報サイト

制作した採用情報サイトのトップページのサムネイル画像

  使用したソフト
Photoshop / visual studio code / Teraterm /sourcetree
  使用言語、CMSなど
HTML / CSS / JavaScript / PHP
  コメント
企業採用情報サイトのWEBサイト。
企画、デザインとコーディング、プログラミングを担当。
ドメイン設定、webサーバーにgit環境構築、PHPの共通パーツ作成などのプログラミング、アニメーションに関するコーディングを担当。
entryボタンの画像を透過させて作成したグラデーションアニメーションや、スクロールアニメーション等を制作。
https://gwf.jp/recruit/

 ランディングページ

制作したコーポレートサイトのトップページのサムネイル画像

  使用したソフト
Photoshop/ visual studio code / bitbucket
  使用言語、CMSなど
HTML / CSS / JavaScript / PHP
  コメント
空間除菌商品のランディングページのコーディング、ASPシステムとのカート連携・問い合わせページのプログラミングを担当。
https://clean.jcs-hd.com/

 コーポレートサイト

制作したコーポレートサイトのトップページのサムネイル画像

  使用したソフト
Photoshop
Brackets
  制作時間
3週間
  コメント
IT企業様のWEBサイト。
デザインとコーディングのすべてを担当。 ページは2ページの構成になっており、トップページとは別で採用情報のページがあります。採用募集を見た方に伝わりやすくなるよう意識しながら制作し、キーワードが目立つように制作しました。
http://www.1st-service.jp

 ジェラート店

制作したジェラート店のWEBサイトのトップページのサムネイル画像

  使用したソフト
Illustrator
Photoshop
Dreamweaver
  制作時間
3週間
  コメント
ジェラート店のWEBサイト。
主にデザインを担当。ほぼ全ページのデザインを行いました。デザインは「近隣の方々に親しみを与え、知っていただくためのサイト」のコンセプトのもとに制作しました。コーディングは、「GERATO」のページを担当し、CSSとHTMLの記述を行いました。
全6ページの構成です。

  その他

 イラスト

子年のイラスト

  使用したソフト
Photoshop
  制作時間
30分
 コメント
年賀状向けの子年のイラスト。
手書きのイラストをスキャナで取り込み、Photoshopを使用してペンツールで作成しました。お正月らしく筆で描いたようなタッチになるよう、ブラシを使って線を描いています。

 ハロウィンのイラスト

ハロウィンのイラスト

  使用したソフト
Illustrator
  制作時間
45分
 コメント
ジャック・オ・ランタンのイラスト。
Illustrator で制作しています。下書きした画像をパスでトレースして制作。

 ハロウィンのイラスト

ハロウィンのイラスト

  使用したソフト
Illustrator
  制作時間
45分
 コメント
おばけのイラスト。
Illustrator で制作しています。下書きした画像をパスでトレースして制作。

 キービジュアル

特集ページ　キービジュアル

  使用したソフト
Photoshop
Illustrator
  制作時間
1時間
 コメント
入学に関する特集ページのキービジュアル画像。
Photoshop、Illustrator を使用。
入学に関する特集記事だとアピールできるよう、春らしくぽかぽか陽気が連想されるようにデザインしました。
学校のイラストは素材を使用していますが、他のパーツは制作しています。

 キービジュアル

スパ施設サイト　キービジュアル

  使用したソフト
Photoshop
  制作時間
1時間
 コメント
スパ施設のキービジュアル。
Photoshop、Illustrator を使用。
女性向けのスパということで、リッチで淡いテイストでデザイン。
自然いっぱいの写真にスペクトルを追加し、魅力が伝わるように制作しています。

 名刺

桜をメインに使ってデザインした名刺

  使用したソフト
Illustrator
  制作時間
1時間
  コメント
プライベート等で使用できるような自分用の名刺をデザインしました。
４月生まれですのでサクラをモチーフにして制作しました。サクラはイラストレーターを使用して、作成しています。

 メモ帳

Illustratorで制作したメモ帳（2種類）

  使用したソフト
Illustrator
  制作時間
1時間
  コメント
イラストレーターで作成したオリジナルキャラクターを使用して、メモ帳のデザインを行いました。キャラクターは下絵をベジェ曲線でトレースして制作していきました。

 メモ帳

Illustratorで制作したメモ帳（2種類）

  使用したソフト
Illustrator
  制作時間
1時間
  コメント
イラストレーターで作成したオリジナルデザインのキャラクターを使用して、メモ帳のデザインを行いました。名刺で作ったサクラの花びらを使用して制作しました。