Araki Takashi
0. はじめに飲食店のレイアウト及び、ShopifyのECサイトについて観察したかったこともあり、今回はブルーボトルコーヒーのオンラインショップについて分析。 1. レイアウト・文字 全体的に余白を生かしたモバイルファーストな構成で、 モバイルとPCでは微調整程度でほぼシームレスなレイアウトとなっている。 （変化があるのは、メインナビゲーションがハンバーガーメニューになったり、イメージリンクが２列⇨１列になる程度） ・十分な余白 ・タイポグラフィ（AXIS＆小さめのフォ
皆大好きOOUIですが、周りに読書会する仲間もいないので一人寂しく、実践してみた内容を公開します。 参考書籍はもちろんこちら↓ オブジェクト指向UIデザイン──使いやすいソフトウェアの原理 (WEB+DB PRESS plusシリーズ) ソシオメディア株式会社 https://www.amazon.co.jp/dp/4297113511/ref=cm_sw_r_tw_dp_-uT9FbGPE36RH 以下フェーズごとに記載していますが、書籍にもあるように決して直線
0. 本記事に書かれていることはじめまして。Arakiと申します。 今回は先日４ヶ月掛かった CourseraのUI/UX講座(by CalArts)を修了したため、振り返りを兼ねた紹介ノートを投稿します。 UI/UXについて実践と学習を繰り返している中で、海外に目を向けると多くの有益な情報や学習リソースが転がっているにもかかわらず、日本語での解説記事が少ないと日頃から感じています。 自分自身も数少ない記事を参考にさせていただき学習を進めているため、その一助となれればと本
0. はじめにこんばんは。時期が空いてしまいましたが、UIトレース７回目です。なぜ時期が空いてしまったかというと、「Facebookをトレースする前にマテリアルデザインを理解せねば」ということで、下記コースを受講していました。 結果的に、上記を通じてマテリアルデザインの基本を理解することで、Facebookの凄みの一端を感じ取れたのでこの順番で取り組んでみてよかったと感じています。 今回のトレースからの学びはElevationについてです。 1. Elevation(高
0. はじめにこんにちは。 今回はモバイル対応について知見を得るために、 cocodaのLPをトレースして判明したことをまとめます。 ちなみに前回のLPサイトPCサイズを分析した記事は↓こちらです。 結論から言うと、 「ザ・モバイルファースト」ですね。 自分も初めの頃は、「PCブラウザサイズから作って後から小さくした方がいいよねー」と思っていましたが、 今は、モバイルファースト＝「制約が多くかつアクセスシェアの高いスマホサイズから作成する」がUIデザインのセオリーです
0. はじめにこんにちは。いつかやろうと思っていたGAFA様にとうとう手をつけます。 ということで今回は、AppleのiPhone LP(ランディングページ)です。 今回は、モノトーンの配色バランス・レスポンシブ対応について学びが多かったためそこにフォーカスします。あと少しフォントについて。 1. モノトーン配色 視認性を追求したモノトーン配色の見本ですね。 この画像に全てが詰まっていました。 ・背景について ヒーロー及び最上部のヘッダーを#000000にし、 その
0. はじめにこんにちは。実践経験を積むために、dailyUIを始めましたが、 初っ端から経験が少ないサインアップ画面がお題で出たためこれを機に、 Twitterのサインアップ画面をトレースしてみることにしました。 1. モーダル各要素の配置について ・モーダルのサイズ及び要素間の配置 W500×H540pxで丸みが15px。 要素が多い中で上記のように、 要素間の余白がバランスよく取られていました。 ・次へボタンの配置 通常記入欄の下に来ると思われる「次へ」が右上に
はじめにこんにちは。UIトレース３回目です。 今回は天下のデザイナー向けサービスcocodaのLPです。 https://cocoda-design.com/ さすが考え抜かれているなという印象で、学びが多かったため、 今回はLPだけです。 また今回はテーマを絞ってまとめてみます。 1. フォントと配色 ・フォントサイズ フィボナッチ数列的な、h1:h2:p = 約1:2:3 のバランスを採用。 ・カラー グレーのヴァリエーションとそれぞれの組み合わせが超絶勉強になり
はじめにUIトレース２回目です。 情報系のウェブサービスに興味があったため、 今回はnote https://note.com/ です。 初回は学習のため網羅的に記載しましたが、 今回からはポイントに絞って書いていきます。 0. 全体を通してカラー：アクセントカラー（#2BB696） ＆グレーだけの流石なミニマルデザイン。 フォント：system-ui 前回の任天堂ではフォントを指定していたので、 webサービス系と宣伝系のwebページでは優先順位が異なると思われる
こんにちは。プロダクトデザイナー見習いの荒木と申します。 プロダクトデザインの様々な役割と責任の奥深さに恐れ慄きつつも一つ一つ学び実践して身につけていこうと日々奮闘中です。 本シリーズではUIデザインの観点で、トレースを継続的に行うことで学びを増やしていきたいと考えています。 有名なTomoyuki Arasunaさんの記事の８つのポイントを参考にトレースからの学びをまとめていきます。 以下参考リンク↓ デザイナーがwebサイトを模写する際に見るべき8つの学習ポイント
