新屋敷🥞デザイナー

デザイナー【目標】他者への想像力を持ち、ビジネスに貢献する【勉強】webデザイン・業務…

新屋敷🥞デザイナー

デザイナー【目標】他者への想像力を持ち、ビジネスに貢献する【勉強】webデザイン・業務システム/SaaSのUIデザイン ▼SNS https://twitter.com/sinyashikiakhr https://www.instagram.com/yashikisin/

最近の記事

業務に活かせるGoogle Material DesignのTipsまとめ

Material Design(マテリアルデザイン)はGoogleが提唱しているデザインのガイドラインで、UIデザインに携わる人間として教科書的な役割を果たしています。 最近Material 3としてアップデートされて内容が一新されました。 しかし、「Material 3…???…1も2も知りまへん…( ;∀;)」と初学者や経験の浅いデザイナーは思っているのではないでしょうか? 僕は正直思っていました… 内容も盛りだくさんなため、内容を全て把握するのは億劫に感じます。 G

    • 2年目デザイナーが業務に活かせた書籍51冊

      もう少しで3年目を迎える2年目デザイナーの新屋敷と申します。受託のデザイン会社で、企業サイトのwebデザイン、業務システムやSaaSのUIデザインを今までさせていただきました。 今までの業務の中で「読んでいてよかったな」と感じ、役に立った書籍をまとめてみました。 アプリUIデザインの教科書 マルチデバイス時代のサイト設計-アーキテクチャからUXまで はじめてのUIデザイン オブジェクト指向UIデザイン──使いやすいソフトウェアの原理 Design Systems ―

      • ストレングスファインダーでデザイナーのキャリアとアクションプランを考えてみた

        どうも、とあるウェブ制作会社でデザイナー(2年目)をしております新屋敷です。 去年、会社でストレングスファインダーを導入したこともあり、診断してみました。 ストレングスファインダーとは、ギャラップ社が提供してるツールで、webテストを受けると、全34の資質の中から自分の強み・才能を知ることができます。 本記事では、自分の資質を鑑みた上で、ストレングスファインダーの結果をデザイナーとしてどのように活かすべきか考えてまとめてみました。 過去にストレングスファインダーを受けた方

        • 入社半年の新米デザイナーが既存の製品サイトを勝手にリニューアルしてみた

          今回は自主練習を兼ねて、backlogのwebサイトを勝手にリニューアルしてみました。 元サイトは特に問題点があるわけでないですが、仕事で触れる機会があるツールだと作りやすくて制作課題としてピッタリだなと思い、backlogを選びました。 今回の制作フローは以下記事を参考に進めました。 実際の制作のフローと異なる部分がありますが、記事の内容に従い、5つのステップで解説していきます。 ①ターゲット像を描く ②ターゲットに与えるイメージを決める ③イメージボード作成&競合サイ

        業務に活かせるGoogle Material DesignのTipsまとめ

          トレースでBtoBサイトの基本デザインを分析

          今回トレースしたのは、キャリアインキュベーションさんのコーポレートサイトです。 キャリアインキュベーションさんのサイトはコチラ >>> このサイトで特徴的な所を下記にまとめました。 【1】コンバージョン率を向上させるCTAのデザイン 【2】完遂率を意識したフォームデザイン 【3】読みやすさと使いやすさが考慮されたコンテンツ幅 【4】文字サイズが16px以上で、小さく読みにくい文字は使わない 【5】リンクやボタンが明確で分かりやすく、誤解されないデザインである 記事では

          トレースでBtoBサイトの基本デザインを分析

          大手企業サイトで学んだ万人が扱いやすいデザイン

          今回トレースしたのは日本通運さんのTopページです。 日本通運株式会社 企業サイト >>> あるデザイナーの方がツイッターで『現場で求められる良いWebデザイン』の事例として取り上げているのを見て、このサイトを知りました。 この記事では、本サイトをトレースしている中で、特徴的だと感じた下記の3点について触れていこうと考えております。 ❶ファーストビューおよび直下のデザインは、ユーザーが情報を探しやすく工夫されており機能的である ❷一般的なセオリーに従っている(リンクや

          大手企業サイトで学んだ万人が扱いやすいデザイン

          航空会社サイトを分析

          今回はこちらのサイトをトレースしました。 使いやすくて見やすいUIであり、超ハイレベルなサイトだと感じトレースして勉強しました。(スマホのみ) 【色】めちゃくちゃ多くの色が使われている。使いやすさが命のサイトでは、色を意図的に増やす事で、ユーザビリティ向上に貢献しているのだろう。 【文字】※スマホのデザインのみの情報でかつ、解像度は二倍でトレースしているので、実寸にするには数値を1/2にする必要があります。 【サイドのマージン】サイドのマージンは基本的に17pxだが、ニ

          航空会社サイトを分析

          【若い女性向け】華ややけど大人っぽいデザイン

          S-DROOVEの新卒サイトを過去にトレースした時に気付いた事をまとめていこうと思います。 https://www.s-groove.co.jp/freshers/#/ ターゲット:アパレル業界に憧れを持っている女子大学生 今回はサイトのwebのグラフィックの要素を色・文字・レイアウトの3つに分解して、分析して行きたいと思います。 色 ⬛︎メインの二色 ブライトトーンでカジュアルでポップなイメージで若い女性に向けた配色。 ⬛︎ベースカラー ライトトーンで可愛らしくて、

          【若い女性向け】華ややけど大人っぽいデザイン

          【分析】病院HPで分かるシニア向けのデザインルール

          今回は、病院のサイトのデザインをトレースしていて気付いた事をまとめようと考えております。(まだ、全然途中やけど......[3/19現在]) 今回取り上げるのは『虎の門病院』 https://www.toranomon.gr.jp/ パっと見た感じは先進的なイメージで医療従事者や求職者に対してアピールしたい感がバンバンします。しかし、よく見ると患者さんやシニアの方にも寄り添った使いやすいデザインである事がわかります。 なので、このサイトから学んだ『シニア向けのデザイ

          【分析】病院HPで分かるシニア向けのデザインルール

          スマホサイトの目次デザイン分析

          スマホでコンテンツを読んでいるとページが縦長になってしまいます。 なので、大概のサイトの下層ページには目次があり、ユーザーは自分が読み進めたい所に移動したり、ページ全体の概要を把握しやすくなります。 スマホで色々なサイトを見ていく中で、僕が気になった目次のデザインについて取り上げ、分析してみようと思い、この記事を書きました。 あくまで、自分の中のデザインの引き出しを増やす事が目的なので、他の人の参考にはならないかも。。。。。 【ピッカー型の目次】 https://www.

          スマホサイトの目次デザイン分析

          誰のためのデザイン?を読んで

          D.A.ノーマンの誰のためのデザイン読んで、要点をまとめてメモってた。 復習の意味を込めて、掲載しまふ。

          誰のためのデザイン?を読んで

          秀悦サイトのトレースから学んだ事

          デザインの上達方法として『気になったデザインの良し悪しを言語化する』という方法が良いらしく早速試しました。 (情報元:https://youtu.be/l2tDnxeq-Y4) 分析したサイトについて京都美術工芸大学 https://www.kyobi.ac.jp/ 某大阪の制作会社が制作したサイトで、ウェブデザイニングやギャラリーサイトにも掲載されているほど、クオリティの高いサイト。 私自身も、非常にこのサイトから学ばせていただくことが多く、過去にXDを使ってトレースを

          秀悦サイトのトレースから学んだ事

          3つの割合で測る レイアウト分析

          題材にしたのは、『きょうの料理ビギナーズ』。 大学のグラフィック研究で学んだことを元に、家にあった雑誌を分析してみました。 (webデザイナーでも紙面のデザインの勉強はめちゃくちゃ大事だという情報をさっき知ったので画像にまとめてみました。) 先生に教わったことから一部抜粋して、手作りで資料作りました。 レイアウトの様式効果に影響を与える3つの割合について分析してみました。 以上の3点の要素はwebデザインにも活かすことができ、実際に様式効果として取り柄れているサイト

          3つの割合で測る レイアウト分析