Araki Takashi

流通小売系UI/UXデザイン担当。 Twitterで主に発信しています。https:/…

Araki Takashi

流通小売系UI/UXデザイン担当。 Twitterで主に発信しています。https://twitter.com/Watazumi_UXD UIUXデザイン/AdobeXD/Illustrator/Photoshop

UIトレースで学んだこと♯8 ブルーボトルコーヒー　主にレイアウトとShopifyについて

0. はじめに飲食店のレイアウト及び、ShopifyのECサイトについて観察したかったこともあり、今回はブルーボトルコーヒーのオンラインショップについて分析。 1. レイアウト・文字 全体的に余白を生かしたモバイルファーストな構成で、 モバイルとPCでは微調整程度でほぼシームレスなレイアウトとなっている。 （変化があるのは、メインナビゲーションがハンバーガーメニューになったり、イメージリンクが２列⇨１列になる程度） ・十分な余白 ・タイポグラフィ（AXIS＆小さめのフォ

Araki Takas…

    • 【OOUIレベル3】オブジェクト指向UIデザイン　基礎編レベル3ですでに悩ましい件

      皆大好きOOUIですが、周りに読書会する仲間もいないので一人寂しく、実践してみた内容を公開します。 参考書籍はもちろんこちら↓ オブジェクト指向UIデザイン──使いやすいソフトウェアの原理 (WEB+DB PRESS plusシリーズ) ソシオメディア株式会社 https://www.amazon.co.jp/dp/4297113511/ref=cm_sw_r_tw_dp_-uT9FbGPE36RH 以下フェーズごとに記載していますが、書籍にもあるように決して直線

      Araki Takas…

      • カリフォルニア芸術大学（CALARTS）の　UI/UXデザイン講座（Coursera）で基礎を叩き込んだ話

        0. 本記事に書かれていることはじめまして。Arakiと申します。 今回は先日４ヶ月掛かった CourseraのUI/UX講座(by CalArts)を修了したため、振り返りを兼ねた紹介ノートを投稿します。 UI/UXについて実践と学習を繰り返している中で、海外に目を向けると多くの有益な情報や学習リソースが転がっているにもかかわらず、日本語での解説記事が少ないと日頃から感じています。 自分自身も数少ない記事を参考にさせていただき学習を進めているため、その一助となれればと本

        Araki Takas…

        • UIトレースで学んだこと♯7 Facebookモバイル　マテリアルデザインの教科書でした。

          0. はじめにこんばんは。時期が空いてしまいましたが、UIトレース７回目です。なぜ時期が空いてしまったかというと、「Facebookをトレースする前にマテリアルデザインを理解せねば」ということで、下記コースを受講していました。 結果的に、上記を通じてマテリアルデザインの基本を理解することで、Facebookの凄みの一端を感じ取れたのでこの順番で取り組んでみてよかったと感じています。 今回のトレースからの学びはElevationについてです。 1. Elevation(高

          Araki Takas…

        UIトレースで学んだこと♯8 ブルーボトルコーヒー　主にレイアウトとShopifyについて

        Araki Takashi

        • 【OOUIレベル3】オブジェクト指向UIデザイン　基礎編レベル3ですでに悩ましい件

          Araki Takashi

        • カリフォルニア芸術大学（CALARTS）の　UI/UXデザイン講座（Coursera）で基礎を叩き込んだ話

          Araki Takashi

        • UIトレースで学んだこと♯7 Facebookモバイル　マテリアルデザインの教科書でした。

          Araki Takashi

        マガジン

        • UI/UX
          21本

        記事

          UIトレースで学んだこと♯6 cocoda LP モバイルのレイアウトについて

          0. はじめにこんにちは。 今回はモバイル対応について知見を得るために、 cocodaのLPをトレースして判明したことをまとめます。 ちなみに前回のLPサイトPCサイズを分析した記事は↓こちらです。 結論から言うと、 「ザ・モバイルファースト」ですね。 自分も初めの頃は、「PCブラウザサイズから作って後から小さくした方がいいよねー」と思っていましたが、 今は、モバイルファースト＝「制約が多くかつアクセスシェアの高いスマホサイズから作成する」がUIデザインのセオリーです

          Araki Takas…

          UIトレースで学んだこと♯6 cocoda LP モバイルのレイアウトについて

          Araki Takashi

          UIトレースで学んだこと♯5 iPhone LP 配色とレスポンシブ対応について

          0. はじめにこんにちは。いつかやろうと思っていたGAFA様にとうとう手をつけます。 ということで今回は、AppleのiPhone LP(ランディングページ)です。 今回は、モノトーンの配色バランス・レスポンシブ対応について学びが多かったためそこにフォーカスします。あと少しフォントについて。 1. モノトーン配色 視認性を追求したモノトーン配色の見本ですね。 この画像に全てが詰まっていました。 ・背景について ヒーロー及び最上部のヘッダーを#000000にし、 その

          Araki Takas…

          UIトレースで学んだこと♯5 iPhone LP 配色とレスポンシブ対応について

          Araki Takashi

          UIトレースで学んだこと♯4 Twitter(web) SignUpモーダル

          0. はじめにこんにちは。実践経験を積むために、dailyUIを始めましたが、 初っ端から経験が少ないサインアップ画面がお題で出たためこれを機に、 Twitterのサインアップ画面をトレースしてみることにしました。 1. 　モーダル各要素の配置について ・モーダルのサイズ及び要素間の配置 W500×H540pxで丸みが15px。 要素が多い中で上記のように、 要素間の余白がバランスよく取られていました。 ・次へボタンの配置 通常記入欄の下に来ると思われる「次へ」が右上に

          Araki Takas…

          UIトレースで学んだこと♯4 Twitter(web) SignUpモーダル

          Araki Takashi

          UIトレースで学んだこと♯3 cocoda LP

          はじめにこんにちは。UIトレース３回目です。 今回は天下のデザイナー向けサービスcocodaのLPです。 https://cocoda-design.com/ さすが考え抜かれているなという印象で、学びが多かったため、 今回はLPだけです。 また今回はテーマを絞ってまとめてみます。 1. フォントと配色 ・フォントサイズ フィボナッチ数列的な、h1:h2:p = 約1:2:3　のバランスを採用。 ・カラー グレーのヴァリエーションとそれぞれの組み合わせが超絶勉強になり

          Araki Takas…

          UIトレースで学んだこと♯3 cocoda LP

          Araki Takashi

          UIトレースで学んだこと♯2 note

          はじめにUIトレース２回目です。 情報系のウェブサービスに興味があったため、 今回はnote https://note.com/ です。 初回は学習のため網羅的に記載しましたが、 今回からはポイントに絞って書いていきます。 0. 全体を通してカラー：アクセントカラー（#2BB696） ＆グレーだけの流石なミニマルデザイン。 フォント：system-ui 前回の任天堂ではフォントを指定していたので、 webサービス系と宣伝系のwebページでは優先順位が異なると思われる

          Araki Takas…

          UIトレースで学んだこと♯2 note

          Araki Takashi

          UIトレースで学んだこと♯1 任天堂HP

          こんにちは。プロダクトデザイナー見習いの荒木と申します。 プロダクトデザインの様々な役割と責任の奥深さに恐れ慄きつつも一つ一つ学び実践して身につけていこうと日々奮闘中です。 本シリーズではUIデザインの観点で、トレースを継続的に行うことで学びを増やしていきたいと考えています。 有名なTomoyuki Arasunaさんの記事の８つのポイントを参考にトレースからの学びをまとめていきます。 以下参考リンク↓ デザイナーがwebサイトを模写する際に見るべき8つの学習ポイント

          Araki Takas…

          UIトレースで学んだこと♯1 任天堂HP

          Araki Takashi