マイデザイン備忘録

デザイン（とアンリアルエンジン）の調べたことまとめ

デザインの参考になるサイトまとめ

UIデザイン WEBデザイン

デザインの参考になるサイトまとめてみました

■WEBサイト系

 

▼SANKOU!

https://sankoudesign.com/

カテゴリやサイトの特徴などで検索ができる
シンプルでスタンダードなギャラリーサイト
オススメ度：★★★


▼WebDesignClip

https://webdesignclip.com/

カラーとカテゴリで検索でき、日本と世界のサイトが検索できる
シンプルでスタンダードなギャラリーサイト
オススメ度：★★★


▼MUUUUU.ORG

https://muuuuu.org/

カラーとカテゴリで検索でき、日本と世界のサイトが検索できる
シンプルでスタンダードなギャラリーサイト
オススメ度：★★★


▼1GUU

https://1guu.jp/

ギャラリーがアニメーションで見れる
動きも考慮したデザインをしたいときに参考になるかも
オススメ度：★★★★


▼現代デザイン

https://gendaidesign.com/?postsperpage=23

ヘッダーとページ全体の２つ一気に確認できるギャラリーになっていて
わかりやすい
オススメ度：★★★★


▼81-web.com

https://81-web.com/

カラーとカテゴリで検索でき
シンプルでスタンダードなギャラリーサイト
オススメ度：★★★


▼ちょうどいい

https://choooodoii.com/

制作者にとってちょうどいいサイト集らしい
デザイナーのどこがいいのかというポイントが見れて
勉強になるかもしれない
オススメ度：★★★★


▼URAGAWA

https://uragawa.work/

制作会社ものっているため
サイト作成を依頼したいときにおすすめのギャラリーサイト
オススメ度：★★★


▼LPアーカイブ

https://rdlp.jp/lp-archive/

ランディングページに特化したギャラリーサイト
オススメ度：★★★

 

■スマホサイト系


▼Responsive Web Design JP

https://responsive-jp.com/

PCサイトとスマホサイトのレスポンシブルを一緒に確認できる
オススメ度：★★★★★


▼AGT smartphone design gallery

https://agtsmartphonedesign.com/

スマホサイト　マウスカーソルを合わせるとスクロールしてくれる
オススメ度：★★★

 

▼sps collection

https://spscollection.com/

スマホ系　業種と配色で絞り込みができる
オススメ度：★★

 

▼bookma!

https://bookma.org/

PCサイトとスマホサイトを一緒に確認できる
オススメ度：★★★★

■バナー・サムネイル系

 

▼SAMUNE

https://thumbnail-gallery.net/page/2

サムネイルに特化したギャラリーサイト
オススメ度：★★★★★


▼BANNER LIBRARY

https://design-library.jp/

バナーに特化したギャラリーサイト
オススメ度：★★★★★

■その他

 

▼SANKOU!font

https://sankoufont.com/

フォントが探せるサイト
オススメ度：★～★★★★★


▼Parts.

https://partsdesign.net/

WEBサイトのパーツ別に検索できる
オススメ度：★★★

 

▼Pinterest

https://www.pinterest.jp/

検索の仕方次第でなんでも調べられる
オススメ度：★★★★★～∞

 

■ゲーム系

 

▼ゲームUIブログ

https://gameui.matme.info/blog/

ソシャゲゲームのUIギャラリーサイト
オススメ度：★★★★★


▼Game UI Database

https://www.gameuidatabase.com/index.php

コンシューマーゲームのUIギャラリーサイト※欧米版
オススメ度：★★★★★

 


▼unityroom　※おまけ

https://unityroom.com/

Unityで作られたフリーゲーム投稿サイト
息抜きに
オススメ度：★

ゲームのUIを作る際に参考になる動画まとめ

UIデザイン

今まで感覚的にやってきたUIデザインを人に教える必要があり

わかりやすい動画を調べ、まとめたものになります

主に仕様書からレイアウトを起こすまでが中心になります

 

ゲームUIデザイン参考動画

 

■桜井政博のゲーム作るには

www.youtube.com役立ち度：★★★
詳細：ゲームUIについての短い動画複数個の再生リスト、UIとは的な話、心構え的なこと


■ゲームのUIってどうやって作るの？ ～チラ見せ！プロの開発テクニック～

www.youtube.com

役立ち度：★★★★★
詳細：UIゲームの作り方の流れを説明されている
　　　優先順位を決めて→確定している情報から配置

　　　→色をつける（使う色は絞るとよい）→時間を空けてブラシュアップ

 

■やってはいけない！ゲームUIデザイン3選

www.youtube.com

役立ち度：★★★
詳細：ゲームUIを作る際には知っておかないいけないこと


■【反面教師】ダサいUIから良いUIデザインを学びます

www.youtube.com

役立ち度：★
詳細：スマブラのUIを悪いデザインで作り修正していく


■ウマ娘 プリティーダービーのUI設計事例 ～0を1にするためにUIデザイナーが行った情報から設計へのアプローチ～

www.youtube.com

役立ち度：★★★★★
詳細：ウマ娘のUIを作った際の情報の整理の仕方 結構長い動画

 


↓動画ではなくサイトですがこちらもおすすめ
■“可愛さ”よりも“あたたかさ”！ 「星のカービィ」のUIデザイナーがデザインするうえで意識していることとは？

game.watch.impress.co.jp役立ち度：★★★★
詳細：世界観にあったデザインの仕方

 


個人的な補足
UIを考える際は、ゲームの端末によって考え方が結構変わります
スマホゲームとコンシューマーゲームでは画面サイズの他に

ボタンの表現の仕方が違います

スマホでは視覚的に「ボタン」だとわからせる必要がありますが、

コンシューマーだと常にカーソルが何かしらのボタンを選択しており

十字キーで選択させることになります
またコンシューマーは押すボタンによって

どうアクションするか考える必要もあります

 

 

WEBデザイン、 スマホアプリを作成する際のサイズ

UIデザイン

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デザイン

個人的に気になったゲームのUIデザイン(和風編その2）

 

使用したゲームUIまとめサイト

他

 

前提条件として実際に遊んだものはあまりないため

静止画としてのデザイン性と世界観に着目しました

動的な演出や、遷移などによるユーザビリティ（遊びやすさ）は

一部を除いて基本的に考慮されていません

 

▼その1

気になるゲームのUIデザイン（和風編その1） - おれのデザイン備忘録

 

  • 個人的に気になったゲームのUIデザイン(和風編その2）

 

サクラ革命 ～華咲く乙女たち～

サクラ革命 ～華咲く乙女たち～ | ゲームUIブログ

https://gameui.matme.info/blog/wp-content/uploads/2020/12/Screenshot_20201219-220625.jpg

https://gameui.matme.info/blog/wp-content/uploads/2020/12/Screenshot_20201220-231425.jpg

和風スチームパンクなUIデザイン

主張しすぎず、みせるべきところを見せる作りになっている

シンプルながらよく見ると端々にデザインされていて

まとまりがある気がする

画像2枚目はパッと見落ち着く色合いなのもいい

続きを読む

気になるゲームのUIデザイン（和風編その1）

UIデザイン

個人的に気になったゲームのUIデザイン(和風編その1）

 

使用したゲームUIまとめサイト

他

 

前提条件として実際に遊んだものはあまりないため

静止画としてのデザイン性と世界観に着目しました

動的な演出や、遷移などによるユーザビリティ（遊びやすさ）は

一部を除いて基本的に考慮されていません

 

 

Ghost of Tsushima

Ghost of Tsushima | Game UI Database

https://www.gameuidatabase.com/uploads/Ghost-of-Tsushima08142020-060802-37828.jpg

https://www.gameuidatabase.com/uploads/Ghost-of-Tsushima08142020-060910-96918.jpg

制作は日本ではないのに、うまく和の雰囲気を取り入れられていると感じる

日本国旗の白と赤を基調としたのだろうか

続きを読む

気になるゲームのUIデザイン（ファンタジー編その2）

UIデザイン

個人的に気になったゲームのUIデザイン(ファンタジー編その2）

 

使用したゲームUIまとめサイト

 

前提条件として実際に遊んだものはあまりないため

静止画としてのデザイン性と世界観に着目しました

動的な演出や、遷移などによるユーザビリティ（遊びやすさ）は

一部を除いて基本的に考慮されていません

 

▼その1はこちら

気になるゲームのUIデザイン（ファンタジー編その1） - デザイン備忘録

 

  • 個人的に気になったゲームのUIデザイン(ファンタジー編その2）
    • ブラウンダスト２
    • 女神楽園 ガーデス·パラダイス
    • オクトパストラベラー 大陸の覇者
    • Exos Heroes (エグゾス ヒーローズ)
    • グリムエコーズ
    • エンゲージプリンセス
    • Knightcore Kingdom（ナイトコアキングダム）
    • ソードマスターストーリー

 

ブラウンダスト２

ブラウンダスト２ | ゲームUIブログ

https://gameui.matme.info/blog/wp-content/uploads/2023/07/Screenshot_20230709-143916.jpg

https://gameui.matme.info/blog/wp-content/uploads/2023/07/Screenshot_20230708-230138.jpg

主張がないシンプルなデザイン
硬派な感じが伝わるため無味無臭が逆にいいのかもしれない

続きを読む

気になるゲームのUIデザイン（ファンタジー編その1）

UIデザイン

個人的に気になったゲームのUIデザイン(ファンタジー編その1）

 

今回使用したゲームUIまとめサイト

 

前提条件として実際に遊んだものはあまりないため

静止画としてのデザイン性と世界観に着目しました

動的な演出や、遷移などによるユーザビリティ（遊びやすさ）は

一部を除いて基本的に考慮されていません

 

Final Fantasy VII Remake

Final Fantasy VII Remake | Game UI Database

https://www.gameuidatabase.com/uploads/Final-Fantasy-VII-Remake06082020-090816-7428.jpg

https://www.gameuidatabase.com/uploads/Final-Fantasy-VII-Remake11082020-055735-31217.jpg

ブルーを基調としたスタイリッシュなデザイン
3Dのゲームにイイ感じに調和していると感じた

続きを読む