products
- Webサイト制作
- Webサイトデザイン
- UIデザイン
デザイン・ワイヤーフレーム作成・デザインカンプ作成・HTML,CSSコーディングを行いました。サイトに動きをつけるため、jQueryカスタマイズも行っています。美容院サイトについては、架空の顧客やペルソナを設定してWebサイトを作成しました。
ポートフォリオサイト
(https://redick-portfolio.com/)
デザイン / Adobe XD / HTML / CSS / jQuery
本ポートフォリオサイトです。今までの制作物をまとめました。メインビジュアルの水玉が漂う様子は、常識に囚われずに自由な発想を持つという私の信念を表しています。また丸みを帯びたフォントやボタンなどで、私の穏やかな性格を表現しました。
架空の美容院サイト
(https://redick-portfolio.com/hair-salon.html)
デザイン / Adobe XD / HTML / CSS / jQuery
カラーが得意な美容院を探している30代女性というペルソナを設定し、架空の美容院のWebサイトを制作しました。カラーコレクション画像が映えるように、白を基調としたデザインに仕上げました。また、文字や線は細く統一し、女性らしい、繊細なイメージを演出しました。
架空の顧客を設定し、Adobe XD,Illustrator,Photoshopを用いてWebサイトのファーストビューデザインを作成しました。顧客やユーザーの意図を具体的に想像しながらデザインしました。
架空保育園サイト
デザイン / Adobe XD / illustrator / photoshop
架空の保育園サイトのデザインです。「とにかくたくさん遊んで学ばせることで、心と体を育てる」という方針をアピールし、入園者を増やしたいという設定でデザインを作成しました。ヘッダーのイラストや、写真上の動きのある文字で、活動的で明るいイメージを表現しました。
UIデザインが学べる実践型デザイン学習サービス「Cocoda!」の架空お題をもとに、UIデザインを50個作成しました。
01
プロフィール画面
デザイン / Adobe XD / illustrator / photoshop
ターゲット
難しいニュースを読むのが、ちょっと前向きになるPOPでおしゃれな空気
コンセプト
難しいニュースを読むのが、ちょっと前向きになるPOPでおしゃれな空気
雰囲気
難しいニュースを読むのが、ちょっと前向きになるPOPでおしゃれな空気
02
新規登録画面
デザイン / Adobe XD / illustrator / photoshop
ターゲット
おしゃれ好きな男子大学生
コンセプト
好みの音楽がレコメンドされる音楽アプリ
雰囲気
カジュアル、おしゃれ
03
メッセージ画面
デザイン / Adobe XD / illustrator / photoshop
ターゲット
20代半ばのビジネスマン
コンセプト
20代半ばのビジネスマン
雰囲気
きっちり、使いやすい
04
料理アプリの検索画面
デザイン / Adobe XD / illustrator / photoshop
ターゲット
食べ盛りの子供を持つ夫婦
コンセプト
冷蔵庫にある食材で気軽にできる料理アプリ
雰囲気
やさしい、あたたかい
05
天気アプリのアイコン
デザイン / Adobe XD / illustrator / photoshop
ターゲット
高校生
コンセプト
毎日確認したくなるような天気予報アプリ
雰囲気
ポップ、楽しい
06
音楽アプリの再生画面
デザイン / Adobe XD / illustrator / photoshop
ターゲット
音楽好きな働き盛りの20代後半の女性
コンセプト
ジャケットで選べる音楽アプリ
雰囲気
落ち着いた、おしゃれ
07
フードデリバリーアプリのリスト画面
デザイン / Adobe XD / illustrator / photoshop
ターゲット
都内に住む会社員
コンセプト
食べたいものがすぐに見つかるフードデリバリーアプリ
雰囲気
明るい、美味しそう
08
計算機アプリの計算画面
デザイン / Adobe XD / illustrator / photoshop
ターゲット
30代主婦
コンセプト
買い物や家計簿をつける時にさっと使える電卓アプリ
雰囲気
やさしい、あたたかい
09
天気情報画面
デザイン / Adobe XD / illustrator / photoshop
ターゲット
20代半ばのビジネスマン
コンセプト
出勤前にさっと確認できる天気予報アプリ
雰囲気
シンプル、さわやか
10
地図アプリの行き先検索画面
デザイン / Adobe XD / illustrator / photoshop
ターゲット
スマホを買ってもらった中学生
コンセプト
よく使う道がすぐに確認できる地図アプリ
雰囲気
分かりやすい、手軽
11
お問い合わせ画面
デザイン / Adobe XD / illustrator / photoshop
ターゲット
仕事のかたわら、プログラミング学習を 始めた社会人
コンセプト
分からないことや不具合をすぐに問い合わせられるプログラミング学習サービス(Web)
雰囲気
初めてでも気軽に取り組めるような空気感
12
料理アプリのレシピ画面
デザイン / Adobe XD / illustrator / photoshop
ターゲット
料理好きで見た目にもこだわりたい女子大学生
コンセプト
料理しながら使える料理アプリ
雰囲気
作ってみたくなるような美味しそうな雰囲気
13
カレンダー画面
デザイン / Adobe XD / illustrator / photoshop
ターゲット
“自律した自分”を目指す20代女性
コンセプト
月ごとの表示画面で予定をパッと確認できるカレンダー
雰囲気
Oggi,CLASSY,日経WOMANに出てくる女性が使ってる
14
読書アプリのチャート/グラフ画面
デザイン / Adobe XD / illustrator / photoshop
ターゲット
積ん読しがちな20代の会社員
コンセプト
記録するほど楽しい気分になれる読書アプリ
雰囲気
知的な感じで、どんどん知識が溜まっていくような雰囲気
15
カメラアプリの撮影画面
デザイン / Adobe XD / illustrator / photoshop
ターゲット
最近写真撮影にハマり出した大学生
コンセプト
見た景色や食べ物を鮮やかに、簡単に残しておけるカメラアプリ
雰囲気
さっぱりとしていて、鮮やかな印象
16
ニュースアプリのカテゴリ選択画面
デザイン / Adobe XD / illustrator / photoshop
ターゲット
これからITの知識をつけたい女性新卒社員
コンセプト
好みのカテゴリを選ぶと、適した記事をオススメするAIニュースアプリ
雰囲気
難しいニュースを読むのが、ちょっと前向きになるPOPでおしゃれな空気
17
家計簿アプリの支出記入画面
デザイン / Adobe XD / illustrator / photoshop
ターゲット
子供が生まれてお金の管理を始めた20代後半の夫婦
コンセプト
簡単に記録できる家計簿アプリ
雰囲気
カジュアル、親しみのある
18
ECサイトの商品詳細画面
デザイン / Adobe XD / illustrator / photoshop
ターゲット
ファッション好きな20代男性
コンセプト
ファッション通販アプリ
雰囲気
おしゃれ、シンプル、かっこいい
19
旅行予約アプリのフライト検索画面
デザイン / Adobe XD / illustrator / photoshop
ターゲット
旅行好きな20代女性
コンセプト
煩雑な手続きがないおしゃれ旅行予約アプリ
雰囲気
カジュアルで旅行が楽しみになるような雰囲気
20
ライブ配信アプリのライブ画面
デザイン / Adobe XD / illustrator / photoshop
ターゲット
新しいもの好きな高校生
コンセプト
誰でもスターになれるライブ配信アプリ
雰囲気
ポップ、にぎやか
21
ソーシャルログイン画面
デザイン / Adobe XD / illustrator / photoshop
ターゲット
フィットネスに関心のある20代後半
コンセプト
自分にあったトレーニング方法がわかるフィットネスアプリ
雰囲気
スポーティ、スマートな
22
アプリ紹介画面(Web)
デザイン / Adobe XD / illustrator / photoshop
ターゲット
家計簿アプリのアプリ紹介ページ
載せたい項目
アプリの魅力を伝える情報、ダウンロード導線
雰囲気
カジュアル、親しみのある
23
フィード画面
デザイン / Adobe XD / illustrator / photoshop
ターゲット
最近子供が生まれて子育て奮闘中の20代主婦
コンセプト
子育て情報を発信するメディアアプリ
雰囲気
自然と会話を起こしたくなる雰囲気
24
通話中の画面
デザイン / Adobe XD / illustrator / photoshop
ターゲット
リモートで働くフリーランス
コンセプト
ビジネスシーンで使用できる通話アプリ
雰囲気
どこにいてもオフィスで会議に出ているような雰囲気
25
リワードモーダル
デザイン / Adobe XD / illustrator / photoshop
ターゲット
アプリ一つで完結する決済アプリ
コンセプト
初めてのお買い物が完了した時のモーダル
雰囲気
これから買い物が楽しくなるような雰囲気
26
ランキング画面
デザイン / Adobe XD / illustrator / photoshop
ターゲット
エンタメ好きな高校生
コンセプト
みんなで楽しめるクイズアプリ
雰囲気
みんなでゲームで盛り上がっているような雰囲気
27
クレジット情報の入力画面
デザイン / Adobe XD / illustrator / photoshop
ターゲット
初めての決済アプリを使ってみる20代男性
コンセプト
手続きもお支払いもワンタップな決済アプリ
雰囲気
未来の支払いを体験しているような雰囲気
28
404ページ
デザイン / Adobe XD / illustrator / photoshop
ターゲット
美容にこだわりの強い女性
コンセプト
自分にあった美容院を予約できるサイト/アプリ
雰囲気
女性誌「Sweet」のような大人ガーリーな雰囲気
29
スワイプ画面
デザイン / Adobe XD / illustrator / photoshop
ターゲット
よく外食する働き盛りの20代
コンセプト
スワイプで近くのお店を選べるアプリ
雰囲気
手軽でポップな雰囲気
30
カート内の画面
デザイン / Adobe XD / illustrator / photoshop
ターゲット
新しいもの好きな30代主婦
コンセプト
全てが揃うオンラインショッピングサイト
雰囲気
ナチュラルな雰囲気
31
検索結果画面
デザイン / Adobe XD / illustrator / photoshop
詳細
検索画面が見つからない時の画面
コンセプト
欲しいものが見つかるフリマアプリ
雰囲気
やさしい、カジュアル
32
漫画アプリの本棚画面
デザイン / Adobe XD / illustrator / photoshop
ターゲット
マンガ好きな20代前半の男性
コンセプト
豊富なラインナップを無料で楽しめる漫画アプリ
雰囲気
にぎやか、ユーモラス
33
グッズ作成画面
デザイン / Adobe XD / illustrator / photoshop
ターゲット
クリエイティブ好きな20代女性
コンセプト
自分だけのオリジナルグッズを作れるサービス
雰囲気
ポップで作っているのが楽しくなる雰囲気
34
メッセージ削除画面
デザイン / Adobe XD / illustrator / photoshop
画面詳細
03のメッセージ画面の削除画面
ターゲット
20代半ばのビジネスマン
雰囲気
ビジネスシーンでも使えるチャットアプリ
35
ダッシュボード画面
ダッシュボード画面
デザイン / Adobe XD / illustrator / photoshop
ターゲット
都内に住む20代会社員
コンセプト
運動のログを貯められるアプリ
雰囲気
スポーティで洗練された雰囲気
36
イベントサイト詳細画面
イベントサイト詳細画面
デザイン / Adobe XD / illustrator / photoshop
ターゲット
音楽好きな20代男性
コンセプト
音楽イベントの予約サイト
雰囲気
シンプルで馴染みやすい
37
欲しいものリスト
欲しいものリスト
デザイン / Adobe XD / illustrator / photoshop
ターゲット
転職を考えている新卒3年目の会社員
コンセプト
デザインやプログラミングのコンテンツが買えるサービス
雰囲気
整っているが敷居が高すぎない雰囲気
38
ログイン画面
ログイン画面
デザイン / Adobe XD / illustrator / photoshop
画面詳細
パスワードミスなどでエラーが出た際のログイン画面
ターゲット
おしゃれ好きな男子大学生
コンセプト
好みの音楽がレコメンドされる音楽アプリ
39
お絵かき画面
お絵かき画面
デザイン / Adobe XD / illustrator / photoshop
ターゲット
子育てが忙しいママさん
ターゲット
子供に渡して遊ばせられるお絵かきアプリ
コンセプト
子供らしい、マイルドな
41
タイマー画面
タイマー画面
デザイン / Adobe XD / illustrator / photoshop
シーン
料理や勉強など時間を測って何かする時
コンセプト
手軽に使えるタイマーアプリ
雰囲気
シンプルで見やすい
42
動画アプリの動画詳細画面
動画アプリの動画詳細画面
デザイン / Adobe XD / illustrator / photoshop
ターゲット
休日はゆったり動画を楽しみたい30代
コンセプト
見たい映画やTV番組が見られる動画アプリ
雰囲気
他の動画も見たくなるレコメンド要素付き
43
eギフト画面
eギフト画面
デザイン / Adobe XD / illustrator / photoshop
ターゲット
友達に日頃の感謝を伝えたい人
コンセプト
友達に気軽にeギフトが送れるアプリ
雰囲気
ギフトを贈る側、もらった側の画面を作ってみよう
44
チュートリアル
チュートリアル
デザイン / Adobe XD / illustrator / photoshop
ターゲット
仕事を効率化したいビジネスマン
コンセプト
シンプルで使いやすいTodoリストアプリ
雰囲気
初めてでもすぐに使い方が分かる
45
Cocoa!LPリデザイン
Cocoa!LPリデザイン
デザイン / Adobe XD / illustrator / photoshop
ターゲット
デザインを学びたい人
コンセプト
デザインで繋がり、学び会えるコミュニティサービス
雰囲気
先進的でクールな雰囲気
46
商品の購入
商品の購入
デザイン / Adobe XD / illustrator / photoshop
ターゲット
安く手軽に商品を買いたい人
コンセプト
欲しいものが見つかるフリマアプリ
雰囲気
買うものを決めてから購入完了までの画面
47
検索機能
検索機能
デザイン / Adobe XD / illustrator / photoshop
ターゲット
おしゃれにこだわりがある男性
コンセプト
メンズでも使いやすいヘアサロン予約アプリ
雰囲気
気軽に使えるカジュアルな雰囲気
48
移動経路表示
移動経路表示
デザイン / Adobe XD / illustrator / photoshop
シーン
住所に沿って初めての場所に行く時
コンセプト
目的地までの経路を示してくれる地図アプリ
画面詳細
目的地設定〜到着までで必要な画面
49
画像アップロード
画像アップロード
デザイン / Adobe XD / illustrator / photoshop
ターゲット
イラストを描くのが好きな人
コンセプト
気軽にイラスト画像を投稿できるSNS
雰囲気
馴染みやすい、シンプル