マガジン
UI/UX
Araki Takashi
- 21本
記事一覧
UIトレースで学んだこと♯3 cocoda LP
はじめにこんにちは。UIトレース３回目です。 今回は天下のデザイナー向けサービスcocodaのLPです。 https://cocoda-design.com/ さすが考え抜かれているなという印象で、…
UIトレースで学んだこと♯2 note
はじめにUIトレース２回目です。 情報系のウェブサービスに興味があったため、 今回はnote https://note.com/ です。 初回は学習のため網羅的に記載しましたが、 今回か…
UIトレースで学んだこと♯8 ブルーボトルコーヒー 主にレイアウトとShopifyについて
0. はじめに飲食店のレイアウト及び、ShopifyのECサイトについて観察したかったこともあり、今回はブルーボトルコーヒーのオンラインショップについて分析。
1. レイアウト・文字
全体的に余白を生かしたモバイルファーストな構成で、
モバイルとPCでは微調整程度でほぼシームレスなレイアウトとなっている。
（変化があるのは、メインナビゲーションがハンバーガーメニューになったり、イメージリンクが
【OOUIレベル3】オブジェクト指向UIデザイン 基礎編レベル3ですでに悩ましい件
皆大好きOOUIですが、周りに読書会する仲間もいないので一人寂しく、実践してみた内容を公開します。
参考書籍はもちろんこちら↓
オブジェクト指向UIデザイン──使いやすいソフトウェアの原理 (WEB+DB PRESS plusシリーズ) ソシオメディア株式会社 https://www.amazon.co.jp/dp/4297113511/ref=cm_sw_r_tw_dp_-uT9FbGP
カリフォルニア芸術大学（CALARTS）の UI/UXデザイン講座（Coursera）で基礎を叩き込んだ話
0. 本記事に書かれていることはじめまして。Arakiと申します。
今回は先日４ヶ月掛かった
CourseraのUI/UX講座(by CalArts)を修了したため、振り返りを兼ねた紹介ノートを投稿します。
UI/UXについて実践と学習を繰り返している中で、海外に目を向けると多くの有益な情報や学習リソースが転がっているにもかかわらず、日本語での解説記事が少ないと日頃から感じています。
自分自身
UIトレースで学んだこと♯7 Facebookモバイル マテリアルデザインの教科書でした。
0. はじめにこんばんは。時期が空いてしまいましたが、UIトレース７回目です。なぜ時期が空いてしまったかというと、「Facebookをトレースする前にマテリアルデザインを理解せねば」ということで、下記コースを受講していました。
結果的に、上記を通じてマテリアルデザインの基本を理解することで、Facebookの凄みの一端を感じ取れたのでこの順番で取り組んでみてよかったと感じています。
今回のトレ
UIトレースで学んだこと♯6 cocoda LP モバイルのレイアウトについて
0. はじめにこんにちは。
今回はモバイル対応について知見を得るために、
cocodaのLPをトレースして判明したことをまとめます。
ちなみに前回のLPサイトPCサイズを分析した記事は↓こちらです。
結論から言うと、
「ザ・モバイルファースト」ですね。
自分も初めの頃は、「PCブラウザサイズから作って後から小さくした方がいいよねー」と思っていましたが、
今は、モバイルファースト＝「制約が多
UIトレースで学んだこと♯4 Twitter(web) SignUpモーダル
0. はじめにこんにちは。実践経験を積むために、dailyUIを始めましたが、
初っ端から経験が少ないサインアップ画面がお題で出たためこれを機に、
Twitterのサインアップ画面をトレースしてみることにしました。
1. モーダル各要素の配置について
・モーダルのサイズ及び要素間の配置
W500×H540pxで丸みが15px。
要素が多い中で上記のように、
要素間の余白がバランスよく取られて
UIトレースで学んだこと♯3 cocoda LP
はじめにこんにちは。UIトレース３回目です。
今回は天下のデザイナー向けサービスcocodaのLPです。
https://cocoda-design.com/
さすが考え抜かれているなという印象で、学びが多かったため、
今回はLPだけです。
また今回はテーマを絞ってまとめてみます。
1. フォントと配色
・フォントサイズ
フィボナッチ数列的な、h1:h2:p = 約1:2:3 のバランスを採
UIトレースで学んだこと♯2 note
はじめにUIトレース２回目です。
情報系のウェブサービスに興味があったため、
今回はnote https://note.com/ です。
初回は学習のため網羅的に記載しましたが、
今回からはポイントに絞って書いていきます。
0. 全体を通してカラー：アクセントカラー（#2BB696）
＆グレーだけの流石なミニマルデザイン。
フォント：system-ui
前回の任天堂ではフォントを指定して