デザインの参考になるサイトまとめ
デザインの参考になるサイトまとめてみました
■WEBサイト系
▼SANKOU!
カテゴリやサイトの特徴などで検索ができる
シンプルでスタンダードなギャラリーサイト
オススメ度：★★★
▼WebDesignClip
カラーとカテゴリで検索でき、日本と世界のサイトが検索できる
シンプルでスタンダードなギャラリーサイト
オススメ度：★★★
▼MUUUUU.ORG
カラーとカテゴリで検索でき、日本と世界のサイトが検索できる
シンプルでスタンダードなギャラリーサイト
オススメ度：★★★
▼1GUU
ギャラリーがアニメーションで見れる
動きも考慮したデザインをしたいときに参考になるかも
オススメ度：★★★★
▼現代デザイン
https://gendaidesign.com/?postsperpage=23
ヘッダーとページ全体の２つ一気に確認できるギャラリーになっていて
わかりやすい
オススメ度：★★★★
▼81-web.com
カラーとカテゴリで検索でき
シンプルでスタンダードなギャラリーサイト
オススメ度：★★★
▼ちょうどいい
制作者にとってちょうどいいサイト集らしい
デザイナーのどこがいいのかというポイントが見れて
勉強になるかもしれない
オススメ度：★★★★
▼URAGAWA
制作会社ものっているため
サイト作成を依頼したいときにおすすめのギャラリーサイト
オススメ度：★★★
▼LPアーカイブ
ランディングページに特化したギャラリーサイト
オススメ度：★★★
■スマホサイト系
▼Responsive Web Design JP
PCサイトとスマホサイトのレスポンシブルを一緒に確認できる
オススメ度：★★★★★
▼AGT smartphone design gallery
https://agtsmartphonedesign.com/
スマホサイト マウスカーソルを合わせるとスクロールしてくれる
オススメ度：★★★
▼sps collection
スマホ系 業種と配色で絞り込みができる
オススメ度：★★
▼bookma!
PCサイトとスマホサイトを一緒に確認できる
オススメ度：★★★★
■バナー・サムネイル系
▼SAMUNE
https://thumbnail-gallery.net/page/2
サムネイルに特化したギャラリーサイト
オススメ度：★★★★★
▼BANNER LIBRARY
バナーに特化したギャラリーサイト
オススメ度：★★★★★
■その他
▼SANKOU!font
フォントが探せるサイト
オススメ度：★～★★★★★
▼Parts.
WEBサイトのパーツ別に検索できる
オススメ度：★★★
検索の仕方次第でなんでも調べられる
オススメ度：★★★★★～∞
■ゲーム系
▼ゲームUIブログ
https://gameui.matme.info/blog/
ソシャゲゲームのUIギャラリーサイト
オススメ度：★★★★★
▼Game UI Database
https://www.gameuidatabase.com/index.php
コンシューマーゲームのUIギャラリーサイト※欧米版
オススメ度：★★★★★
▼unityroom ※おまけ
Unityで作られたフリーゲーム投稿サイト
息抜きに
オススメ度：★
ゲームのUIを作る際に参考になる動画まとめ
今まで感覚的にやってきたUIデザインを人に教える必要があり
わかりやすい動画を調べ、まとめたものになります
主に仕様書からレイアウトを起こすまでが中心になります
ゲームUIデザイン参考動画
■桜井政博のゲーム作るには
www.youtube.com役立ち度：★★★
詳細：ゲームUIについての短い動画複数個の再生リスト、UIとは的な話、心構え的なこと
■ゲームのUIってどうやって作るの？ ～チラ見せ！プロの開発テクニック～
役立ち度：★★★★★
詳細：UIゲームの作り方の流れを説明されている
優先順位を決めて→確定している情報から配置
→色をつける（使う色は絞るとよい）→時間を空けてブラシュアップ
■やってはいけない！ゲームUIデザイン3選
役立ち度：★★★
詳細：ゲームUIを作る際には知っておかないいけないこと
■【反面教師】ダサいUIから良いUIデザインを学びます
役立ち度：★
詳細：スマブラのUIを悪いデザインで作り修正していく
■ウマ娘 プリティーダービーのUI設計事例 ～0を1にするためにUIデザイナーが行った情報から設計へのアプローチ～
役立ち度：★★★★★
詳細：ウマ娘のUIを作った際の情報の整理の仕方 結構長い動画
↓動画ではなくサイトですがこちらもおすすめ
■“可愛さ”よりも“あたたかさ”！ 「星のカービィ」のUIデザイナーがデザインするうえで意識していることとは？
game.watch.impress.co.jp役立ち度：★★★★
詳細：世界観にあったデザインの仕方
個人的な補足
UIを考える際は、ゲームの端末によって考え方が結構変わります
スマホゲームとコンシューマーゲームでは画面サイズの他に
ボタンの表現の仕方が違います
スマホでは視覚的に「ボタン」だとわからせる必要がありますが、
コンシューマーだと常にカーソルが何かしらのボタンを選択しており
十字キーで選択させることになります
またコンシューマーは押すボタンによって
どうアクションするか考える必要もあります
WEBデザイン、 スマホアプリを作成する際のサイズ
WEBデザインやスマホアプリを作成する際のサイズを調べてみました
特にスマホは年々サイズが高解像度になり求めらえるサイズが年々変わっており
いい機会だったので経験も踏まえてまとめてみました
制作の流れと各サイズまとめ
WEBサイトを作成する際
PCサイトとスマホ両方に対応する
レスポンシブを採用するのが一般的になっています
デザインの手順としてはPCサイズを作成後→スマホサイズにリサイズ
という流れになると思います
その際に基準となるサイズを調べてまとめてみました
（WEB上の表示物は解像度72dpiで作られます）
■フォントサイズ
PCサイト
・本文サイズ 16or18px（行間1.8em）
・タイトル 32px（行間1.3em）
・最小サイズは12px
・本文サイズ 16or18px（行間1.8em）
・タイトル 18px～28px（行間1.3em）
・最小サイズは12px
※em（エム）は相対値「フォントサイズ×em」で改行の高さ
※photosop上でスマホ画面を作る際はフォントサイズは２倍で作り偶数のpxで作ること
■PCサイズ
横幅を決めて縦はスクロールで自由にサイズを変更できるようにするのが一般的
ディスプレイのサイズはシェア率の高い
「1920px × 1080px」または「1366px × 768px」でそこを考慮して
制作するのがおすすめですが、
フル画面で表示する必要性がそれほど求められていないため
多くの企業サイトは横幅「950px〜1100px」で作成されている
※ファーストビューでどうしても見せたいものがある場合はファーストビューも考慮する必要がある
※横幅がこのサイズ以下になったらスマホ画面に切り替えるレスポンシブのブレイクポイントを定める
■スマホサイズ
スマートフォンの解像度は「Retinaディスプレイ」が使われており
制作したpxを1/2～に縮小して表示しているため制作時のサイズは大きい
アプリ制作時は縦サイズも重要です
キャンバスサイズは画面サイズ【縦/横 19.5:9】にして
画面サイズ
iPhone 14 Pro 2556 x 1179 px
iPhone 14 Plus 2778 x 1284 px
iPhone 14 2532 x 1170 px
iPhone SE(第3世代) 1334 x 750 px
さらにノッチやフッターのセーフゾーンを考慮しフルHDの【縦/横 16：9】を基準に作成する必要がある
iphone14を基準とする場合
キャンバスサイズは2556 x 1179pxにして
セーフゾーンを考慮して【縦/横 16：9】で作成する
画面中央から「2096 x 1179px」が望ましい
サイズの計算が必要な時はアスペクト比計算ツール
https://ocadweb.com/aspectratiotools
スマホサイズの詳しいサイトまとめ
■iphone
https://qiita.com/tomohisaota/items/f8857d01f328e34fb551
■Android
https://qiita.com/le_skamba/items/32c8fc1dcf2a9b153e07
■iphone Android
https://blog.digimerce.jp/2018/01/25/4028/#4028_02
・画面サイズメモ
iPhone 14 Pro 2556 x 1179
iPhone 14 Plus 2778 x 1284
iPhone 14 2532 x 1170
iPhone SE(第3世代) 1334 x 750
■2023年版 アプリのデザインサイズどうするよ？
https://bakenekonoseitai.com/engineering/20230501-devicesize/
・（ノッチやフッターを考慮した）セーフゾーンを考慮する
・フルHDの【横/縦 16:9】を基準
・キャンバスサイズは【横/縦 9:19.5】
・画面サイズ＝解像度ではない
■WEBデザインの横幅サイズはこれで決まり！基礎から徹底解説
https://japan-design.jp/design/0050/
・スマートフォンの解像度は「Retinaディスプレイ」が使われており
従来の解像度と比較すると解像度が倍以上になり高画素密度のディスプレイ
フォントサイズの詳しいサイトまとめ
■フォントサイズ
https://tane-be.co.jp/knowledge/web-design/2601/
・各サイズの早見表アリ
・スマホで表示してみるとよいかも
■スマートフォン・PCで読みやすいフォントサイズ＆行間とは？国内のメディアサイトを調べてみた。
https://www.asobou.co.jp/blog/web/fontsize
・em（エム）は相対値
→16pxのテキストに対して1.5emだと行の高さが
フォントサイズの1.5倍（24px）になる
・望ましいサイズ
本文サイズ（PC＆スマホ）16か18px（1.8em）
タイトル （PC）32px（1.3em）、(スマホ)18px～28px（1.3em）
最小サイズは12px
※photoshopでスマホのデザインする際は２倍サイズでデザインする
※スマホ版のフォントサイズはPC版の2倍サイズで作成し端数無し偶数にする
おまけアプリアイコンサイズ
■アプリアイコンサイズ
https://note.com/designswitch/n/n1d8e34c5ad8c
・最大サイズ1024x1024pxを作成し他サイズはリサイズ
気になるゲームのUIデザイン（和風編その2）
個人的に気になったゲームのUIデザイン(和風編その2）
使用したゲームUIまとめサイト
-
ゲームUIブログ（ソシャゲメイン）
-
Game UI Database | Welcome（海外サイトで英語版ゲーム）
他
前提条件として実際に遊んだものはあまりないため
静止画としてのデザイン性と世界観に着目しました
動的な演出や、遷移などによるユーザビリティ（遊びやすさ）は
一部を除いて基本的に考慮されていません
▼その1
気になるゲームのUIデザイン（和風編その1） - おれのデザイン備忘録
- 個人的に気になったゲームのUIデザイン(和風編その2）
サクラ革命 ～華咲く乙女たち～
和風スチームパンクなUIデザイン
主張しすぎず、みせるべきところを見せる作りになっている
シンプルながらよく見ると端々にデザインされていて
まとまりがある気がする
画像2枚目はパッと見落ち着く色合いなのもいい
続きを読む気になるゲームのUIデザイン（和風編その1）
個人的に気になったゲームのUIデザイン(和風編その1）
使用したゲームUIまとめサイト
-
ゲームUIブログ（ソシャゲメイン）
-
Game UI Database | Welcome（海外サイトで英語版ゲーム）
他
前提条件として実際に遊んだものはあまりないため
静止画としてのデザイン性と世界観に着目しました
動的な演出や、遷移などによるユーザビリティ（遊びやすさ）は
一部を除いて基本的に考慮されていません
- 個人的に気になったゲームのUIデザイン(和風編その1）
- Ghost of Tsushima
- SEKIRO
- Getsufumaden Undying Moon（月風魔伝 アンダイング・ムーン）
- 天穂のサクナヒメ
- NARUTO－ナルト－ 疾風伝 ナルティメットストーム3
- ナルティメットストーム４
- 鬼滅の刃 ヒノカミ血風譚
- 九十九姫
Ghost of Tsushima
Ghost of Tsushima | Game UI Database
制作は日本ではないのに、うまく和の雰囲気を取り入れられていると感じる
日本国旗の白と赤を基調としたのだろうか
続きを読む気になるゲームのUIデザイン（ファンタジー編その2）
個人的に気になったゲームのUIデザイン(ファンタジー編その2）
使用したゲームUIまとめサイト
-
ゲームUIブログ（ソシャゲメイン）
-
Game UI Database | Welcome（海外サイトで英語版ゲーム）
前提条件として実際に遊んだものはあまりないため
静止画としてのデザイン性と世界観に着目しました
動的な演出や、遷移などによるユーザビリティ（遊びやすさ）は
一部を除いて基本的に考慮されていません
▼その1はこちら
気になるゲームのUIデザイン（ファンタジー編その1） - デザイン備忘録
- 個人的に気になったゲームのUIデザイン(ファンタジー編その2）
ブラウンダスト２
主張がないシンプルなデザイン
硬派な感じが伝わるため無味無臭が逆にいいのかもしれない
気になるゲームのUIデザイン（ファンタジー編その1）
個人的に気になったゲームのUIデザイン(ファンタジー編その1）
今回使用したゲームUIまとめサイト
-
ゲームUIブログ（ソシャゲメイン）
-
Game UI Database | Welcome（海外サイトで英語版ゲーム）
前提条件として実際に遊んだものはあまりないため
静止画としてのデザイン性と世界観に着目しました
動的な演出や、遷移などによるユーザビリティ（遊びやすさ）は
一部を除いて基本的に考慮されていません
- 個人的に気になったゲームのUIデザイン(ファンタジー編その1）
- Final Fantasy VII Remake
- テイルズ オブ アライズ
- ゼノブレイド2
- シャイニング・レゾナンス
- ドラガリアロスト
- 夢職人と忘れじの黒い妖精
- プリンセスコネクト リダイブ
- プリコネ！グランドマスターズ
- クローバーシアター
Final Fantasy VII Remake
Final Fantasy VII Remake | Game UI Database
ブルーを基調としたスタイリッシュなデザイン
3Dのゲームにイイ感じに調和していると感じた
