Shinozaki Portfolio

架空猫専門ペットホテル Kaku-Nyan

デザイン/HTML・CSS/jQuery/WordPress

初めてのレスポンシブ化とremを使ったコーディング、WordPress化に挑戦したサイトです。

サイトURL: https://shino-portfolio.net/wp/

制作期間: 8時間×7日間
目的: ホテルへのお問い合わせ件数を増やし、売り上げに繋げたい
ターゲット: 20代～30代の出張などで忙しい多い一人暮らしの方
キーワード: #癒し　#のびのび　#かわいい　#片手間
カラー: ピンクを基調とした優しいパステルカラー
使用ツール: Photoshop、illustrator、Dreamweaver、WordPress

フランス観光局（架空）

チームで決まったデザインに沿ったデザイン/HTML・CSS/jQuery

チーム制作で、チームで決まったデザインに沿って「Building」「Guide」ページのデザインとコーディングを行いました。

初めてのjQueryを使ったスライダーとモーダルウィンドウを組み込み、チームで決まったことや連絡事項はメモ帳にまとめてこまめにサーバーで共有することを心がけました。

サイトURL: https://shino-portfolio.net/kaku_france/
※ID：ccaweb パスワード：cca202246

制作期間: 8時間×9日間
目的: フランスのメジャースポット以外の穴場を見せることで、初訪・再訪に繋げたい
ターゲット: 子育て後の夫婦、子供なし夫婦、過去にフランスを訪れたことがある人、フランスの穴場的な観光地に行きたい人、フランスの文化的な名所を見たい人、街や都市を訪れたい人、観光・文化施設を訪れたい人
キーワード: #カップル　#穴場　#観光　#落ち着き
カラー: 街並みの茶系でまとめたアースカラー
使用ツール: Photoshop、illustrator、Dreamweaver

架空納豆推進協会

デザイン/HTML・CSS

初めて制作したWebサイトです。

positionレイアウトや、拙いながらもcssでのホバーアクションやキーフレームアニメーションといった動きを、インターネットで調べながら試行錯誤し実装しました。

サイトURL: https://shino-portfolio.net/kaku_nattou/

制作期間: 8時間×10日間
目的: コロナ渦で売り上げが落ち込む中、購買意欲を刺激したい
ターゲット: 納豆が好きで、コロナ渦でも納豆の品質にはこだわりたい50代～の方
キーワード: #高級　#落ち着き　#見やすさ　#わかりやすさ
カラー: 納豆を連想させるような茶色を中心に、商品の素材感を活かすような淡い配色
使用ツール: Photoshop、illustrator、Dreamweaver

架空溶接専門学校 KAKUU

デザイン

表現の幅を広げたいと思い、知識の無い分野の男性向けに挑戦しました。

溶接業のかっこよさを演出するため、スピード感のあるデザインを意識しています。

サイトURL: https://shino-portfolio.net/welding/
※デザインカンプのみ

制作期間: 35時間
目的: お問い合わせ件数を増やし、生徒を増やしたい
ターゲット: 溶接業に就きたいと思っている高校3年生の男性
キーワード: #かっこいい　#スピード感　#力強さ　#男性向け
カラー: ベースカラーは紺色で引き締めて信頼感を出し、アクセントの黄色でお問い合わせを目立たせるように
使用ツール: Photoshop、illustrator

Shinozaki Portfolio

デザイン/HTML・CSS/jQuery

穏やかで人に寄り添えるような柔軟性をアピールするために「丸さ、柔らかさ」をテーマとしています。

スマートフォンだけでなくタブレットにも対応させ、作品にアクセスしやすい構造と一覧性を意識しています。

サイトURL: https://shino-portfolio.net/portfolio（当サイト）

制作期間: 7時間×3週間
目的: ストレスなく見れる上で、自身の人柄が伝わるようなサイトにしたい
ターゲット: 忙しい採用担当者の方々
キーワード: #私らしさ　#丸さ　#柔軟　#穏やか　#一覧性・見やすさ
カラー: 穏やかさの象徴として柔らかくて明るめの黄緑を中心に、アクセントはサーモンピンクで
使用ツール: XD、Photoshop、illustrator、Dreamweaver

Shinozaki Portfolioバナー

Shinozaki Portfolio（gifバナー）

デザイン

卒業制作作品集のリンクバナーとして制作しました。

最初に動きを大きめに付けて目を引くようにしたり、ふわっとした滑らかな動きでも穏やかさを表現するよう意識しました。

制作期間: 5時間
目的: 自身の人柄が伝わるようにしたい
ターゲット: これから職業訓練校に入ってくる方、採用担当者の方
キーワード: #私らしさ　#丸さ　#柔軟　#穏やか
カラー: 穏やかさの象徴として柔らかくて明るめの黄緑を中心に
使用ツール: Photoshop、illustrator

example bar バナー広告

example bar（バナー）

デザイン

初夏に向けた、カフェに近いカジュアルな雰囲気のカクテル専門店の広告です。

20代の若い方に向け、じめじめとした梅雨を吹き飛ばすイメージで勢いのある写真を使用しています。

制作期間: 8時間×9日間（バナー＋動画）
目的: カジュアルなカフェ寄りのカクテル専門店に、お酒にあまり馴染みのない人にも興味を持ってもらい客足を伸ばしたい
ターゲット: あまりお酒に馴染みはないが気になってはいる20代の女性
キーワード: #フレッシュ　#カジュアル　#初夏　#勢い　#女性向け
カラー: カジュアルで夏を先取りするような明るいトーンで、黄色と水色を中心に
使用ツール: Photoshop、illustrator

example bar（動画）

デザイン

バナーと同時に制作した20秒程度の動画です。

目に入る最初に一番勢いのある動きを付け、フレッシュで爽やかな雰囲気作りをしています。

制作期間: 8時間×9日間（バナー＋動画）
目的: カジュアルなカフェ寄りのカクテル専門店に、お酒にあまり馴染みのない人にも興味を持ってもらい客足を伸ばしたい
ターゲット: あまりお酒に馴染みはないが気になってはいる20代の女性
キーワード: #フレッシュ　#カジュアル　#初夏　#勢い　#女性向け
カラー: カジュアルで夏を先取りするような明るいトーンで、黄色と水色を中心に
使用ツール: Photoshop、illustrator

架空猫専門ペットホテル Kaku-Nyanロゴ

架空猫専門ペットホテル Kaku-Nyan

デザイン

猫がのびのびできるようなイメージで制作しました。
優しいブラウンを基本に淡いピンクをアクセントにしています。

ターゲット: 20代～30代の出張などで忙しい多い一人暮らしの方
キーワード: #癒し　#のびのび　#かわいい
使用ツール: illustrator

フランス観光局（架空）ロゴ

フランス観光局（架空）

デザイン

フランスの象徴として有名なエッフェル塔を文字に取り込み、若いカップルが好みそうな小慣れ感を意識しています。

ターゲット: 子育て後の夫婦、子供なし夫婦、過去にフランスを訪れたことがある人、フランスの穴場的な観光地に行きたい人、フランスの文化的な名所を見たい人、街や都市を訪れたい人、観光・文化施設を訪れたい人
キーワード: #カップル　#穴場　#観光　#落ち着き
使用ツール: illustrator

架空納豆推進協会ロゴ