ユニクロの新アプリ（２）

今日は前回の投稿に引き続き、ユニクロアプリを見てみましょう。

今週の授業で学んだ事を応用してみると、ユニクロアプリのデザインはやはりマテリアルデザインです。
ロゴから始め、結構デザインの領域に気を使っているユニクロだから、アプリも最新流行のデザインなのも当然。

さて、今日は服のメニューを中心に細かいメニューの話です。

メインから女性服のメニューを押した時出てくる画面です。

オンラインショップ専用ページにジャンプしてきました。

上段にドロワーメニューが固定されて、どんなスクロールしたどんな画面からも男性服やキッズのメニューに行けます。

下段には一番上の画面に戻れるトップボタンと、カートのボタンが固定されます。

あとウェブブラウザーみたいなボタンと、メイン画面に戻れるボタンの「閉じる」もありあります。

基本的にこの画面からどの画面にでも移動できる感じです。便利。

実はここはリニューアルする前のデザイン変わってないんですけどね。笑

でもやっぱりドロワーメニューとカートボタンの位置が微妙すぎて気持ち悪いですね。

特にカートボタンはなぜそこ？って感じ。画面を見るのを邪魔してます。デザイナーさんに理由が聞きたいくらいです。

画面をスクロールしてみました。

ランキングとかは横スクロールで最後まで確認できます。

一番下まで行くとメインと同じメニューが見れます。

やっぱり全体的にすごくまとまってる感じはしますけど、カートボタンが謎です。

次の投稿では、ユニクロのアプリのデザインとモバイルウェブサイトのデザインを比較してから、Mujiのアプリを見てみたいと思います。

ユニクロの新アプリ（１）

今日はユニクロの新アプリの話です。

実際リリースされたのは二週くらい前で、結構いろんな部分が大きく変わってます。

以前のデザインは撮ってないので比較はできないんですけど…。

サービスのメインになるメニューが画面の上段とか下段とか、ドロワーメニューになってるんじゃなくて、画面の真ん中に位置してるのが独特です。

上には今度のアップデートで新しく追加された会員バーコードとお気に入りのボタンがあって、その下にアプリの付加メニューである時計とかカレンダーが入ってるライフツールと、結構重要な店舗検索のボタンが大きく配置されてます。

ユニクロアプリを使う人が、このアプリに一番求める機能ってなんでしょう。

自分はやはりカテゴリー化されたユニクロ商品の情報とか、近くの店舗のニュースとか、今週のセール情報のチラシとかなんですけど…。

そのメニューがアプリを開いた時特定な画面でしか見れないのは残念。

次の投稿でもっと詳しい部分まで見てみたいと思います。

myfonts.com

NY TIMESは次回にして、今日はある凄く便利なウェブサイトを紹介しようと思います。
タイトルに書いたmyfonts.comと言うサイトです。

メインページはこんな感じ。
１９９９年度から存在してきた、ウェブを良く利用するデザイナーならほとんどが知りそうなサイトです。実は自分も現役ウェブデザイナーの友達から教えてもらったんですよ。
サイトの名前通りいろんなフォントが中心です。

有料の商用フォントを、単語や短い文章を文字色と背景色を選んで試しに書いてどんな感じに見えるのかをサイト上で簡単に見れるようになっています。
購入したフォントの利用範囲もアイコンの形で見やすいので、フォントを選んで買うまでの過程が凄く楽です。ウェブ用に使えるフォントは一つのメニューにまとまってるのもとても便利。

自分が思うこのサイトの最も便利な機能は、「WhatTheFont」というメニューです。

探したいフォントの画像をアップロードして、

認識された画像の文字をどんな文字か直接入力すれば、

こうやってどんなフォントなのか、フォントの名前が出てきます。
これは本当に便利！
雑誌とか広告、いろんなところで見て良いと思ってもフォント名がわからなくて使えなかった悩みが解決される素敵な機能です。

Pitchforkの分析（２）

昨日の投稿に引き続き、pitchforkのサイト分析です。

ヘッダのSNSボタン。

マウスポインターを合わせると画像が変化するロールオーバー効果を採択してます。普通のSNS以外に、YouTubeとSpotifyという動画・音楽系のサイトもあるのが特徴的です。昨日の投稿にも書きましたけど、ボタンを３行２列に配置してるのは何でだろう？と思っちゃいますね。余白が多いのがすごく気になります。

検索バーはキーワードを入力すると、サイト内の記事が自動的にカテゴリー別に表示されます。検索ポータルサイトのおすすめ検索キーワードみたいな感じで非常に便利です。

当然な事なんですけど、リターンキーを押せば普通の検索結果の画面が出ます。

上右段のボタンは、クリックすると音楽ストリーミングサイトSoundCloudと連動し、pitchforkで取り上げている新曲のレビューを実際の曲を流しながら読む事ができます。ウィジェットみたいな感じです。

次はフッタ。

左にロゴーマークのモノクロバージョンが入ってて、コピーライト情報は間を開いてその下の部分に2行で入ってます。その外の部分を広く使ってサイトマップのようにサイト全体のメニューを一目で見れるように配置しています。

背景とは違う色で区分されていて、マージンも多い感じです。メニューがカテゴリー化されていて見やすいけど、フッタに入ってるからここまでスクロールしないと見えないからあんまり利用する事がないかも。

あとは一番下の部分に、最近まではなかったCondé Nast.のコピーライト情報も載っています。

ネビゲーターのいろんなメニューをクリックしてみると、ページによって背景の色が違ったり、実際触ってみると面白い部分が結構あるサイトです。

新聞や雑誌とか、記事やレビューがメインのサイトをデザインする時参考になるかも。

次回の投稿では、また欧米のサイトなんですが、NY TIMESの話がしたいと思います。

初更新：Pitchforkの分析（１）

少し遅くなりましたが、IC２用ブログの初更新です。

今日はIC１のブログでも紹介した事がある、アメリカのインディーズ音楽レビューサイト「Pitchfork」の分析をしたいと思います。

最近Condé Nast.という、東京にも拠点があるアメリカ本社の多国籍雑誌出版企業の傘下に入って話題になったサイトです。

全体のデザインは雑誌みたいな構成になってます。

音楽のレビューサイトという特性で、テキストが多い印象。

横の両側のバックグラウンド領域を排除した横の長さは1060ptです。

先ずはヘッダから見てみましょう。

ヘッダにはロゴマーク、文字ロゴ、ネビゲーター、検索バー、SNSへのリンク等が入ってます。

左上には小さくロゴマークを、右上にはSNSへのリンクボタンを配置しています。

文字ロゴはロゴマークと同じくらいの大きさで、ロゴマークより下のセンターにあります。上段の余白が多いのが気になります。理由は色々考えてみましたけど、やはりわからないまま…。

ネビゲーターは横長で、マウスポインターを合わせると自動的にサブメニューが出てくる

ロールオーバー？スタイル。クリックしたメニューボタンは赤く表示されます。

ヘッダから見ると、ウェブバージョンのNY TIMESに似ている印象です。

白、黒、グレー、赤で色をあんまり使ってないのも特徴的。

今日はここまで。

明日のはフッタやその他の分析をする予定です。