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サイトのファーストビューデザインを作成しました。顧客やユーザーの意図を具体的に想像しながらデザインしました。

架空保育園サイトのpcモックアップ 架空保育園サイトのtbモックアップ 架空保育園サイトのspモックアップ

架空保育園サイト

デザイン / Adobe XD / illustrator / photoshop

架空の保育園サイトのデザインです。「とにかくたくさん遊んで学ばせることで、心と体を育てる」という方針をアピールし、入園者を増やしたいという設定でデザインを作成しました。ヘッダーのイラストや、写真上の動きのある文字で、活動的で明るいイメージを表現しました。

架空保育園サイトのpcモックアップ 架空保育園サイトのtbモックアップ 架空保育園サイトのspモックアップ

架空音楽イベントサイト

デザイン / Adobe XD / illustrator / photoshop

様々なロックアーティストを招いて、ショックを受けるほどに好きなアーティストに出会える「SHOCK ROCK」という架空の音楽イベントを想定してデザインを作成しました。稲妻マークを用いて「SHOCK」を表現し、印象的なフォントのロゴでロックらしいクールな印象を演出しました。背景画像にはライブ画像を設定し、盛り上がっている様子を表現しました。

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

料理アプリのレシピ画面

料理アプリのレシピ画面1 料理アプリのレシピ画面2

デザイン / 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サイトの商品詳細画面

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)

アプリ紹介画面(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ページ

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

ターゲット

子育てが忙しいママさん

ターゲット

子供に渡して遊ばせられるお絵かきアプリ

コンセプト

子供らしい、マイルドな

40

日程調整画面

日程調整画面

デザイン / Adobe XD / illustrator / photoshop

ターゲット

幹事を任されがちな会社員

雰囲気

退屈な日程調整を楽しんでできる

41

タイマー画面

タイマー画面

デザイン / Adobe XD / illustrator / photoshop

シーン

料理や勉強など時間を測って何かする時

コンセプト

手軽に使えるタイマーアプリ

雰囲気

シンプルで見やすい

42

動画アプリの動画詳細画面

動画アプリの動画詳細画面

デザイン / Adobe XD / illustrator / photoshop

ターゲット

休日はゆったり動画を楽しみたい30代

コンセプト

見たい映画やTV番組が見られる動画アプリ

雰囲気

他の動画も見たくなるレコメンド要素付き

43

eギフト画面

eギフト画面 eギフト画面

デザイン / Adobe XD / illustrator / photoshop

ターゲット

友達に日頃の感謝を伝えたい人

コンセプト

友達に気軽にeギフトが送れるアプリ

雰囲気

ギフトを贈る側、もらった側の画面を作ってみよう

44

チュートリアル

チュートリアル

デザイン / Adobe XD / illustrator / photoshop

ターゲット

仕事を効率化したいビジネスマン

コンセプト

シンプルで使いやすいTodoリストアプリ

雰囲気

初めてでもすぐに使い方が分かる

45

Cocoa!LPリデザイン

Cocoa!LPリデザイン

デザイン / Adobe XD / illustrator / photoshop

ターゲット

デザインを学びたい人

コンセプト

デザインで繋がり、学び会えるコミュニティサービス

雰囲気

先進的でクールな雰囲気

46

商品の購入

商品の購入1 商品の購入2 商品の購入3

デザイン / Adobe XD / illustrator / photoshop

ターゲット

安く手軽に商品を買いたい人

コンセプト

欲しいものが見つかるフリマアプリ

雰囲気

買うものを決めてから購入完了までの画面

47

検索機能

検索機能

デザイン / Adobe XD / illustrator / photoshop

ターゲット

おしゃれにこだわりがある男性

コンセプト

メンズでも使いやすいヘアサロン予約アプリ

雰囲気

気軽に使えるカジュアルな雰囲気

48

移動経路表示

移動経路表示

デザイン / Adobe XD / illustrator / photoshop

シーン

住所に沿って初めての場所に行く時

コンセプト

目的地までの経路を示してくれる地図アプリ

画面詳細

目的地設定〜到着までで必要な画面

49

画像アップロード

画像アップロード

デザイン / Adobe XD / illustrator / photoshop

ターゲット

イラストを描くのが好きな人

コンセプト

気軽にイラスト画像を投稿できるSNS

雰囲気

馴染みやすい、シンプル

50

ポートフォリオサイト

ポートフォリオサイト

デザイン / Adobe XD / illustrator / photoshop

コンセプト

今まで作ったデザインをまとめたポートフォリオサイト