久しぶりの投稿とUIトレース (1)

前回の投稿からかなり日数があいてしまった。WEBデザイナー(UI/UXも含め)になる事を目標とし始めたこのnoteだが、
正直な所を言うと前回のnoteを書いてから心が折れてしまっていた。

noteに投稿をしていない間は
HTML/CSS,jQuery等のコーディングについて学んだり、知り合いのお店のサイト作りなどに時間を割いていた。
しかし、学習を行なっていく上で自分の中で的確な学習が行えていないと感じ始めていた。

コーディングの技術に関しては以前よりも上達してるとは思う。
しかしデザインについての学習が疎かになっていた。
そんな思いを感じていた際、Twitterのタイムライン上で
@co_co_d3 ココディー | Cocoda!さんのツイートを見かけた。

これを見てDMを送り数日後に返信を頂きやり取りをして
アドバイスを直に頂いた。
僕がどちらかと言うとサービス系のデザインをやりたい旨を伝えると
運営されているCocoda!をおすすめしてくれた。

Cocoda! - あなたがクリエイターでいられる場所

以前から知ってはいたのだがしっかりと見たことがなかった。
提供されている課題がまさに自分がやるべき事ばかりだったのでもっと早くやっていればと後悔している笑

課題に取り組む前にトレーニングと言ってはなんだが、
UIトレースを一度やって見てからにしようと思いやってみた。

UIトレースの方法を参考させてもらった方のnote
工藤 吉貴さん : https://note.mu/shikiriorio/n/n3847786cb5e8

=====================
UIトレース #FABRIC TOKYO
=====================

使用アプリ

Adobe XD

フレームワーク

・ホーム画面の構成の意図を考える
・一つ一つのパーツの形の意図を考える
・色の意図を考える
・間隔・余白を考える
・フォントを考える
・アイコンなどのグラフィックを考える
・共通ルールを考える
・画面遷移を考える

ホーム画面の意図を考える

サイトトップのファーストビューに自社の製品を着用した
オシャレなスタイリングのバナーをスライドを配置しており自然と目がいく。♯各アイテムのリンクになっている。
取扱商材はスーツなのだが堅苦しい印象が全くない。
下部のセクションが見えておりスクロールへの誘導がいやらしくない。

一つ一つのパーツの形の意図を考える

右下にある追従フロートバナー以外は角ばったパーツが多い
クリーンな印象を保てている。

色の意図を考える

サイト全体の背景は白で統一されているが、各バナーの背景で使用されているのは彩度を抑えたカラフルな色が使用されている。
固い印象のスーツというプロダクトを決して安っぽく感じさせず、オシャレな雰囲気を持たせていると思った。
起用しているモデルからも感じ取れるが、想定するターゲットは
20代前半から30代半ばの仕事で着用するスーツにも普段着と同じようなオシャレな要素を取り入れたいと考えているユーザーをではないかと感じた。

間隔・余白を考える

全体的に各要素が詰まっている箇所は少なく、
大きくゆとりを持ってデザインされていると感じた。
ABOUT US , HOW TO , INFOMATIONの上下には50px左右には45px。
PICK UP生地のタイトルには上下45px、コンテンツには上下35px左右20pxの余白が存在した。
これといったルールは感じられなかったが、ECサイトとして機能させているのにも関わらずここまで余白を持たせているのはクリーンで上品な印象を与える為なのだと推測する。

アイコンなどのグラフィックを考える

これは企業(ブランド)ロゴについての考えだが、
シンプルではあるがしっかりと意味合いのあるデザインだなと感じる。
長方形を重ね合わせたようなロゴで、FABRIC TOKYOのFとTが存在する。
レイヤーを前後でズラし折り重なるようにする事で、
この企業がこだわるスーツに使われている「素材」や「生地」の
織りを表現しているのではないだろうか。

それ以外のハンバーガーメニュー・Favorite・カート等のアイコンは
いたってシンプルなものが使用されていた。
下手な装飾をしないところにもブランディングの狙いを感じる。

共通ルールを考える

シンプルかつ過度な装飾を加えていない

ページ遷移を考える

今回はトップページのみのトレースに留まってしまったので
ページ遷移についての考察はしていません。

終えて見ての反省点

・全体で3時間程かけてしまった。トレース1時間、分析1時間半(途中の休憩も含めて) もっとタイトにしないと続かないし数をこなせない。
・トップのファーストビューまでではなく中途半端に中盤までトレースしてしまった。だったら全部トレースした方が良い。
・まず分析が甘い。もっとサイト側の意図やルールなどについて考察うぃなければならないといけない。

UIトレースにトライできてよかった。
週明けからCocoda!にてサービスデザインにもトライしてみます。
UIトレースは学びが多かったので今後も継続していきます。

小島 南