デザイン

開発・デザイン

【Figma】コメントノートを使ったら、画面が見やすくなりステータス管理しやすくなった

Figmaのコメント機能はバルーンのポップアップ表示なので一覧性に乏しい。Figmaのコメントノートは、コメントの一覧性を保ちながら、タイムスタンプやステータス管理もできるシンプルかつ優れた機能。また、コメントのデザインも可愛くて使いやすい。
開発・デザイン

【アプリ】iOSスクリーンショット用のグリッド投稿をFigmaで作成

iPhoneスクリーンショットは、全てのiPhoneのディスプレイサイズで画像を用意する必要はなく、アプリの UI が複数のデバイス サイズとローカリゼーションで同じである場合は、必要な最高解像度のスクリーンショットを提供するだけで良い。
開発・デザイン

【デザイン】アイコンガイドラインの作成と統一法:Font Awesome, Material Icons, React Icons

クロスプラットフォーム(Web・アプリ)で開発している場合に、歴史的経緯やリソースの優先順位などからアイコンガイドラインが定まっていない場合がある。有名なアイコンフォントとして、Font AwesomeやMaterial Fontsなどが挙げられる。
開発・デザイン

【Figma】オートレイアウトで、アイコン非表示の際にズレないようにする方法

Figmaのオートレイアウトは、要素間の距離を自動的に調整し、デザインの一貫性を保ちながら柔軟にレイアウトを管理できる機能。ナビゲーションバーのデザインにおいてアイコンを非表示にするとタイトルが中央からずれる問題とその解決方法について解説。
起業・経営

【キャラクターデザイン】売れるキャラクターのデザインは左右非対称?

キティちゃんって、実は左右非対称なんですよね。以前に「売れるキャラクター戦略」という本を読んだことがあって、その本に書いてありました。参考になると思いますのでお時間ある際に読んでみてくださいというアドバイスを受けて、下重心で左右非対称にデザインを変更してみた。
開発・デザイン

【ChatGPT × Figma】html.to.designとGPTで、編集可能なモックアップを作成。手書きも可能?

ChatGPTのプロンプトで、Bootstrap風のHTMLファイルを作成してローカル環境で表示。Figmaのプラグイン「html.to.design」を活用してHTMLファイルから修正可能な状態でモックアップとしてFigmaに取り込むことができる。
開発・デザイン

【デザイン4大原則】近接・整列・強弱・反復、カラーアクセシビリティ

デザインの4大原則。近接:互いに関連する情報を近づける、整列:要素に一体性を持たせる、強弱:情報の優先度を明確にする、反復:特徴的なものを意識的に繰り返し使う。Webサイトのカラー配色:ベースカラー70%、メインカラー25%、アクセントカラー5%。
開発・デザイン

【UIデザインの教科書】UI/UXの違い・階層と構造・割り込み・スクロールとページング

UXと比較すれば、UIの扱う範囲は狭いが、UXの中でも最も大事な「使う」という領域を担っている。UIが担う部分はUXの中核。階層は、深く狭くより広く浅く。広く浅い方が目的の情報に辿り着きやすく、ラベル(カテゴリ)名を具体的、排他的に決めやすい。
本・考察

【デザイン】キャラクターデザインは丸による単純化が大事。洋ナシ型・ピーナツ型・マッシュルーム型

いきもののキャラクターデザインをするときは、引き算する描き方が大事。すっきりと削ぎ落としたシンプルな形から、かわいらしさが生まれる。写真などの資料は見過ぎないようにする。囚われ過ぎてしまい、本来のいきものの特徴を捉えにくくなるから。頭身比率は、基本は1:1.5くらい。