ひろせはやた

ひろせはやた

カラーガイドラインの使い方

各カラーの役割プライマリーカラー メインのテキスト色として使用 ヘッダーやフッターの背景色 ナビゲーションバーの背景色 ボタンの枠線や非アクティブ状態の色 セカンダリーカラー サブヘッダーのテキスト色 重要な情報やリンクの色 サイドバーの背景色 アクティブな状態のボタンの背景色 アクセントカラー ホバー状態のボタンやリンクの色 強調したい要素（アイコン、小見出しなど）の色 プログレスバーやグラフの色 具体例プライマリーカラー：ミディアムグレー (#

ひろせはやた

    • デザインコンセプトを一から定義してみた

      自分で構想しているサービスを使って、実際にデザインコンセプトを定義してみました デザインコンセプトを定義するメリットデザインに一貫性を持たせられる チームメンバーが共通の認識を持てる デザインの説得力が増す デザインを検討する際の判断基準になる ブランディングが向上する これから実際に定義していきます 前提サービス概要 ToB向けの動画教育システムのUIデザイン作成 サービスの目的 効率的な作業方法の伝達
 動画を活用して、正しい作業方法をわかりやすく伝え

      ひろせはやた

      • デザインコンセプトの基礎についてまとめてみた

        なぜデザインコンセプトが必要なのかデザインコンセプトを決定すること、以下の役割を満たすことができます 一貫性のあるデザイン制作 チーム内での共通認識 説得力のあるデザイン提案 デザイン判断の基準の定義 目的に沿ったデザインの作成 そもそもデザインコンセプトって？プロジェクト全体のデザインに関する基本的な考え方や方向性を示すものです 具体的には、下記の項目を定義します デザインの全体的な方向性 ビジュアルスタイル レイアウトとグリッドシステム インタラクシ

        ひろせはやた

        • モックアップ（デザインカンプ）の作成手順

          1.ツールの選定Adobe Photoshop、Sketch、Figmaなどのデザインツールを選ぶ 自分は基本的にFigmaを使用するようにしています （共同作業にたけており、コスト面や機能面が優れているため） 2.新規ファイルの作成制作物が表示される環境に合わせて最適化するために、設定を行う 画面サイズ デスクトップ向け：一般的なサイズ: 1920x1080ピクセル モバイル向け：一般的なサイズ: 375x667ピクセル 3.デザインコンセプトの決定以下を行い、

          ひろせはやた

        カラーガイドラインの使い方

        ひろせはやた

          モックアップの作成手順【UIデザイン】

          モックアップとは？アプリやWebサイトのUIを視覚的に表現したものです ワイヤーフレームと違い、色、文字や文章、画像など、詳細なUI要素が既に含まれているもののことを言います デザインの流れとしてはワイヤーフレーム（構造設計）とプロトタイプ（インタラクティブデザイン）の間に位置し、静的な「模型」として、ページ単位でデザインを表現したものになります モックアップ作成時に気を付けること一貫性の維持 色使い、フォント、アイコンなどのデザイン要素を統一し、全体的な一貫性を保つ

          ひろせはやた

          モックアップの作成手順【UIデザイン】

          ひろせはやた

          UIデザイン　4つの原則

          4つの原則とは？UIデザインの4つの原則として以下の4つがあります 近接（Proximity） 整列（Alignment） 反復（Repetition） 強調（Contrast） これらを適切に扱うことで 情報の整理と理解しやすさの向上 ユーザビリティの改善 視覚的な魅力の向上 認知負荷の軽減 デザインの一貫性の確保 とあなたが作成するデザインの質を向上させることができます 近接（Proximity）関連する要素を近づけてグループ化する また、情報を整

          ひろせはやた

          UIデザイン　4つの原則

          ひろせはやた

          ビジュアルデザインの原則

          ライン 空間を区切ったり、グループ化したりして、情報の整理や視覚的な階層を作成する グリッドに沿って要素を配置することで、整然としたレイアウトを実現する フォント 視認性の高いフォントを使用することで、一部を目立たせることができる フォントの種類や太さを変えることで、印象を変えることができる 配色 メインカラーとサブカラーを定義する。 以下の点を実現することができる 要素の重要度や関係性の表現 調和のとれたデザインを実現 ボタン プライマリーボタンとセカン

          ひろせはやた

          ビジュアルデザインの原則

          ひろせはやた

          ワイヤーフレームの作り方

          手順情報設計 ユーザーが求める情報や機能を整理し「何を」・「どこに」・「どのように」配置するかを考察する リサーチ 競合サービスや類似の画面を持つサービスを調査し、参考になる、踏襲できる部分を見つける スケッチ 設計した要素の配置や順番を簡単にスケッチして視覚化する。 文字や画像は入れず、要素をグルーピングする程度に済ませる （手書きで書いても良い） 清書 後からテキストや要素を入れやすいようにスケッチをもとに清書する まだテキストや色は入れず、スケッチをよりき

          ひろせはやた

          ワイヤーフレームの作り方

          ひろせはやた

          ユーザーストーリーの作成手順

          なぜユーザーストーリーを作成する必要があるのか？ユーザーストーリーを作成することには以下のメリットがあります ユーザー視点でシステムの利用方法を具体的に描写することで、ユーザー中心の設計ができる ユーザーが達成したい目的や必要な機能を明確にすることで、要件がより明確にできる どの機能が重要であるかを判断し、デザインや開発の優先順位付けができる 具体的な行動やシナリオを考慮することで、ユーザーが直感的に操作できるインターフェースの設計につながる ユーザーストーリーの作

          ひろせはやた

          ユーザーストーリーの作成手順

          ひろせはやた

          ワイヤーフレームの作成手順を一から調べて実践してみた（要件設計編）

          この記事を読むことでこの記事を読むことで ワイヤーフレームとは何なのか？ ワイヤーフレームを作成するメリット 具体的なワイヤーフレームの作り方（要件設計まで） を学ぶことができます ワイヤーフレームとは？UI設計の中でペルソナ設定の次に行うのがこのワイヤーフレームの作成です ワイヤーフレームとは、Webサイトやアプリケーションの設計・開発において使用されるデザイン設計図のことです。 ページや画面のレイアウトを示すもので、各要素の配置や構造を視覚的に表現します。

          ひろせはやた

          ワイヤーフレームの作成手順を一から調べて実践してみた（要件設計編）

          ひろせはやた

          UI設計の手順①ペルソナを作成する

          ペルソナを作成する目的デザインの方向性を明確にする ペルソナを設定することで、サービスの方向性を決定しやすくなります。 具体的なユーザー像を持つことで、デザインプロセスにおける色、フォント、レイアウトなどを具体化することにつながります。 ニーズの的確な把握 ユーザーの具体的なニーズを把握しやすくなり、需要とのズレを防ぐことができます ペルソナ作成の手順自社・競合の分析 ペルソナを作成する前に、サービスについて市場分析や競合調査を行います。これにより、ターゲットユーザ

          ひろせはやた

          UI設計の手順①ペルソナを作成する

          ひろせはやた

          オートレイアウトとコンポーネントについて作って学んでみた

          なぜオートレイアウトとコンポーネントを学ぶ必要があるのかオートレイアウトを使用することで、要素を自動的に整列させたり、サイズを調整したりすることができます。これにより、デザインの修正や変更を効率よく行うことができます また、コンポーネントを使用することで、デザインの一貫性を保ちながら、再利用可能なUIパーツを作成できます。これにより、デザイン全体の統一感が向上し、メンテナンスも容易になります オートレイアウトとコンポーネントについて手を動かして学ぶ実際にfigmaを使いな

          ひろせはやた

          オートレイアウトとコンポーネントについて作って学んでみた

          ひろせはやた