見た目ではなく、設計を集めている理由
デザインギャラリーには美しい画面がたくさん集まっていますが、「なぜこの並びなのか」までは書かれていないことがほとんどです。
色や写真を差し替えると、参考にしたはずの良さが消えてしまうのは、良さの正体が見た目ではなく情報の構造にあるからだと考えています。
そこでUI PATTERNSでは、配色や装飾をあえて外し、モノクロのワイヤーフレームだけで構造を見せています。
1つのPatternに入っているもの
- PC版・SP版のワイヤーフレーム（原寸で確認できます）
- このワイヤーを作るプロンプト（PC・SPそれぞれ）
- SP版の特徴（PC版から変えた点と理由）
- このワイヤーの特徴
- こんな場合に使う（向いているケース・向いていないケース）
こんな使い方ができます
制作会社への依頼・打ち合わせで
「料金表はこのパターンで」とURLを共有すれば、言葉だけでは伝わりにくい構造のイメージをそろえられます。
AIで画面を作るときの指示として
プロンプトをコピーして画像生成AIやコード生成AIに渡すと、同じ構造のワイヤーやたたき台を作れます。
コピー時には、全Pattern共通の出力指定が先頭に付きます。
自社サイトの見直しに
今のページと見比べて、情報の順番や強調の仕方に抜けがないかを確認する材料になります。
現在は試作版（BETA）です
UI PATTERNSは、試作段階のサイトとして公開しています。
型は順次追加しているほか、公開済みのPatternも、ワイヤーフレームや説明文、プロンプトを見直すことがあります。
内容は予告なく変わる場合があります。
内容についてお気づきの点があれば、お問い合わせからお知らせください。
運営会社
株式会社ENVY DESIGN（東京都港区麻布十番）。
ホームページ制作とSEO・AIO（AI検索対策）のコンサルティングを行っています。
制作実績は500件以上です。