iwata

デザインうまくなりたい

iwata

デザインうまくなりたい

WEBデザイントレース #002

トレース元デザイン トレース ●ブルーのぼかしが効いた爽やかなデザインイメージ 背景のブルーぼかしや、画像の青いシャドウが特徴的で、爽やかでやわらかい(優しい)印象を与える。 また画面に奥行きを生んでいる。 ●FV かわいい外車が印象的である。 ゴリゴリの車好きというよりかは、ミニクーパーやFIATのようなかわいい外車を好む車好きの人をペルソナとしているのではないかと思う。 ターゲットに合わせて、デザインのトンマナも同業他社と差別化を図り、 感度が高いかわいい車好き

iwata

    • WEBデザイントレース

      トレース元デザイン トレース ●斜めの角丸平行四辺形と青が特徴的なデザインイメージ 背景や装飾にグラデーションが多く多用され、先進的な印象を与えている。これによって、”人材クラウドシステム” ”グローバル”といった事業のイメージを表現している ●FV 日本人と海外の人の写真が各1枚づつ切り替わる表現 ”世界の人材(雇用)ビジネス”という事業内容を訴求するために、人物写真が用いられている。画像は上下に切り替わり、人材がマッチするという意図が込められているのではないか

      iwata

      • デザイン分析#018 ｜株式会社アイティプラス

        タイポグラフィが印象的なデザイン 雑誌の誌面を連想させるような、見出し部分のあしらい →SVG素材になっている モックアップやイラストにも文字のあしらいを取り入れることによって、全体のトンマナがより一層まとまっているように思う →文字や数字は背景として扱い、レイヤー感も生まれ画面をリッチにしている 下層のページ見出しも文字のみでシンプルなデザイン 文字で魅せる、比較的シンプルなデザインなので、制作事例画像が目立ち映えている。モノトーンベースの配色に、カラフルな制作事例画

        iwata

        • デザイン分析#017 ｜GLAM APPLE

          ◆サイトの目的、ターゲット 女子会や小さい子供のいる家族など、手軽にアウトドアを満喫できる グランピングとして認知、利用してもらう ◆FV / キャッチコピー FVは画像変遷する仕様 子連れの家族、女子会などターゲット層の写真を採用している ◆フォント 英語：Brandon Grotesque 見出し：筑紫A丸ゴシック テキスト ：游ゴシック 15px ヘッダーメニュー：筑紫A丸ゴシック　17px ◆気づき フッターやハンバーガーメニューの展開がリンゴの形状

          iwata

        WEBデザイントレース #002

        iwata

          デザイン分析#016 ｜ 株式会社エコブレード

          ■ターゲット,目的 メニューやタイトル見出しには英語表記がメインになっており、 中国向けサイトリンクも設置されていることから、海外工場をターゲットにしていると思う。 ■キャッチコピー Try Our New ＝私たちの新しいを試してみてください デザイン自体も今までの製造業サイトとは異なる、フラットなデザイン またモーションを多く取り入れており先進的なイメージを受けるサイトになっている。サイトのトンマナとしても、キャッチコピーの意味合いを表現している。 ■フォント

          iwata

          デザイン分析#016 ｜ 株式会社エコブレード

          iwata

          デザイン分析#015 ｜ 株式会社松下組

          ■リニューアル目的 建設会社のあたらしいイメージを創造し、同業他社との差別化を図る 最終的に採用活動につなげる ■書体 游ゴシック 本文；14px,13px 見出し：22px ヘッダー：10px azo-sans お知らせの日付、コンテンツの英語タイトル(12px)に使用 メルカリロゴのベースになっている書体 Muli 人名の英語表記部分(10px、weight700)のみに使用されていた 読ませるためでなく、装飾的に英語を入れる部分なのでフォントサイズを小さく配置して

          iwata

          デザイン分析#015 ｜ 株式会社松下組

          iwata

          サイトトレース ｜ ALL CONNECT

          トレースしたデザイン コンテンツ幅　1025px 英語見出し；Neufreit / 186px程度 コンテンツの英語タイトルが、このサイトのデザインとして印象的だった。 パララックスになっている 大きく配置することで、コンテンツの区切りとしての効果も持っているように感じた また主要なコンテンツのみに配置されている模様 日本語見出し：Noto sans JP / 13px 不透明度70% 英字を邪魔しないよう、不透明度を下げている コンテンツの余白 コンテンツ間の区切り

          iwata

          サイトトレース ｜ ALL CONNECT

          iwata

          最近読んだ本 ｜ もじもじもじ鉄

          タイポグラフィの再理解のため読んだ「もじもじもじ鉄」で 学んだことをアウトプットすることにしました。 このnoteでは、自分の中でふわっと理解しているタイポグラフィ知識を深めるため、本書の頻出語句や書体について改めて意味を調べるなどして、まとめています。 タイポグラフィ 用語写植書体 DTPが普及する以前の写植が行われていた時代に提供されていた、写植機用の書体のこと。 以前は駅看板でも写植書体が多く見られていたようだが、DTP化の背景もありリニューアルされる駅看板では

          iwata

          最近読んだ本 ｜ もじもじもじ鉄

          iwata

          サイトトレース ｜ スタディサプリ ブランドサイト

          トレース元サイト トレースしたカンプ ■気づいたこと デザイン全体 青系の配色でシンプルなサイト 学習ツールらしい、知的なイメージが訴求されている また3色のグラデーション/強いぼかしが使用されており、未来的な印象を受ける 本サービス(スマホ,PCを使った新しい学習サービス)の特徴や強みをトンマナで表現されていると思った グロナビ ドロップシャドウがかかっている ベース部分は不透明度が下げられており、FVのアニメーションが淡く透けて見える これにより画面に奥行きが生

          iwata

          サイトトレース ｜ スタディサプリ ブランドサイト

          iwata

          デザイン分析#014 ｜ TOSACO

          ■書体 見出し：秀英にじみ丸ゴシックB　36px 平文：中ゴシックBBB　14px 丸ゴシックを見出しに用いることで、やわらかいデザインになる ■配色 テキストは黒ではなく、紺 →恐らくロゴの紺から採用しているのではないかと思った 背景はベージュが配色されている 黒と白に比べて、コントラストが抑えられるので、落ち着いた印象になっている ■デザイン 装飾には、手書きイラストを使用 写真のエッジにはぎざぎざの加工が施されている →手作りっぽさがでる、クラフトビールらしいイ

          iwata

          デザイン分析#014 ｜ TOSACO

          iwata

          デザイン分析#013 ｜ 下北山村の暮らしと関わりを届けるきなりと

          ■サイトの目的 村のことをまずは知ってもらい、尋ねてきてもらう 最終的に移住してもらうことを目的としている ■書体 日本語：游ゴシック 英語：Noto Sans SC ■デザイン 写真を大きく扱い、写真で魅せるサイト 写真から村の様子や雰囲気を伝えている 青系の配色でまとめており、水しぶき模様が背景にあることから 自然が豊かで、水が綺麗な村なんだろうなあというイメージを想起させる 追従メニューにマップリンクを配置。ユーザーの知りたい情報にアクセスしやすい動線ができて

          iwata

          デザイン分析#013 ｜ 下北山村の暮らしと関わりを届けるきなりと

          iwata

          デザイン分析#012 ｜ STORES決済

          ■サイトの目的 ターゲット：店を個人経営している人、店舗経営者、新規開業を予定している人 キャッシュレス決済を導入してもらう ■デザイン シンプルで知りたい情報が整頓された構成で、わかりやすい 青系の配色にまとめ、信頼、誠実な印象を受ける 余分な装飾がないのもBtoBらしいデザインで上記のデザインイメージを相乗させていると思った ■書体 見出し：35px 平文：15px ■配色 テキストカラー：#002e4e テキストカラーを紺にすることで、青系の配色と相性が

          iwata

          デザイン分析#012 ｜ STORES決済

          iwata

          デザイン分析#011 ｜ Renxa

          ■FV シンプルで洗練されたレイアウト 都会的な印象を受ける fvではXをモチーフに、連鎖をイメージするアニメーションが実装されている ■書体 英語：futura pt 日本語；游ゴシック ■配色 ヌーディーな配色 海外サイトで使用されているような色トーンで、洗練されたイメージになっているのかと思った ■余白 コンテンツ、テキスト間の余白 128px 80px 64px 広めの余白がとられている 平文　14px linehight35px 写真があえて見切れるようなレ

          iwata

          デザイン分析#011 ｜ Renxa

          iwata

          デザイン分析#010 ｜ なないろグループ

          ■選んだ理由、分析の目的 子供向けサイトのデザイン分析を行い、引き出しを増やす ■書体 テキスト：Noto Sans CJK JP ロゴや見出しには、手書きっぽさのあるゴシック書体が使用されている 書体特定したかったが、不明…かわいい書体なので気になる… 私はNoto Sans JPの方しか使用していなかったので、 改めてNoto Sans CJK JPとNoto Sans JPの違いをリサーチ ■配色 全体的に多色で賑やかさを感じる配色 画像のロゴ7色をメインに、

          iwata

          デザイン分析#010 ｜ なないろグループ

          iwata

          デザイン分析#009 ｜ AMANO パーキング事業サイト

          ■選んだ理由 BtoBサイトデザインの勉強のため ■書体 見出し：DINNextLTPro-Bold - 600　35px 平文：DINNextLTPro--Regular - 300　16px ■配色 青系の配色でまとめられている 誠実で信頼感を与える、BtoBらしい配色 ■デザイン 左に写真スライド、右にメニューが設置されている 各メニューの内容がスライドで表示され、ページリンクしている スライド画像は写真やイラスト様々で飽きない イラスト素材が多く使用さ

          iwata

          デザイン分析#009 ｜ AMANO パーキング事業サイト

          iwata

          デザイン分析#008 ｜ たかまつななオフィシャルサイト

          ■選んだ理由 キュレーションサイトでFVが目を引いた 文字組が綺麗で気になった ■書体 英語：Overpass　コンテンツタイトル70px 平文：A1ゴッシック　15px #010101 余白 コンテンツ周囲　120px タイトルタイトルと平文の間　48~56px 下線との間　16px 余白を大きくとっているので、コンテンツ ごとにまとまっている また英語タイトルと平文のジャンプ率が大きく、気持ちの良いレイアウト ■デザイン 弧の大きい角丸オブジェクト →未

          iwata

          デザイン分析#008 ｜ たかまつななオフィシャルサイト

          iwata