利用者さんの製作実績(Instagram)
メロの製作ギャラリー


・課題名
Daily UI #01 SNSのプロフィール画面
・SNS名(架空のもの)
「My self」
特に以下の3点は意識して作成しました。
①「女性向け」(なおかつパステル調できれいめ)
②「使ってすぐ飽きるのではなく、お気に入りのSNSになってほしい
③既存の写真投稿SNS(Instagram)との差別化
①「女性向け」(なおかつパステル調できれいめ)
最初はモカブラウン(#d0c8b6)がグレー寄りの青で全体的にクールな雰囲気がありました。それを変更し、暖色系の色で統一することで温かみとマイルドな女性らしさが出ました。
「パステル調」「きれいめ」を意識しつつ、ユーザーが必要としている情報(ヘッダー、フッター、バックボタン、ホームボタンなど絶対に使用する項目)に関しては彩度の高いオレンジみの赤(#f15d60)を使い、ユーザーが混乱しないように視点を集めるなどの配慮を行いました。
②「使ってすぐ飽きるのではなく、お気に入りのSNSになってほしい」
写真とその時の思い出はセットであると考え、その時の思いや感情、感じたことを真空パックできるようなPOST画面を意識しました。いいねをくれた人は数字ではなくアイコンの数で、自分の投稿の隣にはコメント欄をつけ、一つの画面に収めました。
こうすることによって、「皆の反応」「思いの共有」をダイレクトに可視化することができると考えました。
③既存の写真投稿SNS(Instagram)との差別化
画像では確認できないが、ユーザーの設定で「POST一覧で他の投稿よりも、大きく表示する投稿を設定できる」という仕様を考えました。これは、従来グリッドで均一な正方形で区切られていたPOSTが設定の有無によって大きさがランダムに変動する、というもの。実際には実装するのが非常に難しそうだと思ったが、「iphone(iOS)のウィジェット画面」で実装されているので可能ではないかと考えました。
・デザインの感想
実際に手を動かしていく中で分かっていくことが多く、
(変更した方が見やすい→初期案から変更など)草案からは大きくバージョンアップしたが作っていて楽しかったです。
お題としてはプロフィール画面のみだったが、POST画面(投稿画面)も作成しました。写真の一覧だけよりも、ユーザーの生活感が出て良いと思います。
・かかった時間
2022/07/11 13:00~2022/07/12 15:00
(実働:6時間半程度)
・参考にした画面
・Instagram(ベースの参考、差別化)
・Twitter(シンプルなUIの参考)
・最新版のiphone(iOS)のウィジェット画面
・使用ソフト
メイン:Adobe XD
サブ:Illustrator
選択したお題:③ ドリンク&スイーツ
デザインに入れ込む情報項目
- 小キャッチ 夏のひんやり!
- タイトル ドリンク&スイーツ
- あしらい的に入れる要素 新商品も続々登場!
企画のテーマ - 新商品を織り交ぜつつ、夏に飲みたくなるドリンクや食べたくなるスイーツを買っていただく
キーワード - 「夏の季節感」「清涼感」「カジュアル」
(以上、要件定義書から引用)
- 遊び心を感じる動線とフォントを商品の近くに持っていくことで、商品に視点がいくように心がけました。
- 作業後半まで「夏のひんやり!」がタイトルと勘違いしていたため(正しくは「ドリンク&スイーツ」がタイトル)「夏がひんやり!」を前面に押し出したデザインになってしまったことは反省点。「ドリンク&スイーツ」も後から足したので構成としては悪くないが、本来のねらいとは少しずれてしまった印象があります。
- 左下「新商品も〜」、中央「夏の〜!」、右上「ドリンク&スイーツ」のバランスを意識し、何が優先される情報なのかを精査して慎重にサイズを変更しました。そのため、「何を伝えたいか」が明確になって見やすくなったと感じます。
■縦型の炎の名刺
配色や炎の表現(オーバーレイ)などに気をつけて、メリハリのある画面構成を心がけました。下の島の名刺が明るく日中の印象になったので、夜のイメージで使用する色も必要最低限に絞って作成しました。個人的に気に入っています。
■横型の島の名刺
最初に作成したので、やや迷いが生じた作品となりました。画面内に色が複数あり、視点としてはどこを見ていいのか少し迷ってしまうのが反省点。(その反省で炎の方はシンプルにまとまった)最初は旅行代理店店員という設定だったが、無人島をモチーフにしていることから冒険家の名刺に変更。従来の設定にこだわりすぎず、臨機応変に対応できたのは良かったと思います。
- 自社のデザインチームをもっと広め、これから一緒に働くであろう未来のチームメンバー (デザイナー) を集めるため
- 現状: 自社のサービスは比較的大きくなってきて、サービスのCMなども最近始めたところ。デザインチームとしても複数ある自社プロダクトを扱っていくために、よりいっそう連携を深め、仲間集めもしていく必要が出てきた
- 課題:デザインチームがあることや、デザインに力を入れていることをまだまだ知られていない
- 結果的にデザイナーの採用にあまりつながっていない
雰囲気や伝えたい印象 - 前提:記事コンテンツがメインになるので、サイト自体の主張が強過ぎないようにする
(以上、要件定義書より引用)
ビジュアルイメージの理想である「プレーンで控えめ」に関しては、もっと工夫できたな、というのが素直な感想。ボタンはヘッダーなどなどが修正前はほぼ黒だったのを、グレーベースに変更したが、画面の情報量(伝えたい情報)が多く「洗練されている感じ」「余白感」はあまり出せなかった。グラフィックの側面ではなく、情報の取捨選択が今後の課題だと感じた。
所々ポイントで配置している図形やメインビジュアルの四つの色に関しては、「遊び心」「無邪気さ」を想起させるような、比較的彩度の高い色を使用した。これに関しては、厳粛な雰囲気や威圧的な雰囲気からは、求人や採用、ひいてはメインコンテンツであるブログ内容に興味を持ってもらえないと考えたため。「メンバーがイキイキと、楽しそうに仕事をしている」という雰囲気が伝われば、ユーザーも自然と興味を持ってくれるのではと考えた。
コンテンツの順番は「メインビジュアル」→「新着ブログ」→「弊社概要」→「メンバー」→「採用情報」の順に決めた。
「新着ブログ」の優先度が高いのは、ブログがメインコンテンツであることから。また、「このサイトで何を伝えたいのか」がタイトルなどから類推しやすいので必然的に優先度が高くなった。
その後に「弊社概要」→「メンバー」→「採用情報」と続く。
これはネット上であっても、「対面でスムーズに自己紹介している感覚」を忘れないように、ユーザーが抱く疑問や興味に対して違和感なく情報を提示することを意識した。
まず、「弊社概要」で基本的な情報→「メンバー」では実際にこんなメンバーがいるという踏み込んだ内容→「採用情報」でまとめ。
気持ちとしては「採用情報」をもう少し優先度の高い位置に配置したい気持ちもあったが、そうすると単純にブログだけ見に来たユーザーにとっては「採用情報」は求めていない情報という場合もあるので、消去法で最下層に配置した。
今回、一旦投げそうになったものを更にブラッシュアップして投稿している。自信はないが、意識した部分やこだわりはあったので、思い入れの深い作品となった。
チェルシーの製作ギャラリー


かずみっちゃんの製作ギャラリー


ロクサーヌの製作ギャラリー


フライングポニー 製作実績・事例


タイトル:障がいスポーツ 「フライングディスクについて」
コンフォート様は障がい者スポーツの企画をされております。Youtubeチャンネルにも他の障がい者スポーツの動画がアップされておりますので、ぜひご覧ください。
【コンフォート様ホームページ】
https://shougaishasupo-tu.hp.peraichi.com/
タイトル:障がいスポーツ 「ボッチャ」
コンフォート様は障がい者スポーツの企画をされております。Youtubeチャンネルにも他の障がい者スポーツの動画がアップされておりますので、ぜひご覧ください。
【コンフォート様ホームページ】
https://shougaishasupo-tu.hp.peraichi.com/