![](data:image/svg+xml,<svg xmlns="http://www.w3.org/2000/svg" width="48" height="48"><rect fill-opacity="0"/></svg>)
例えば「通知」ですが、商品を販売するクリエイター側は1日1回以上の通知が来る可能性がありますが、基本的に大多数であるはずの購入者はそんなに通知が来ないのでヘッダーに置くくらいでちょうど良いかもしれません
そしてこっちもできる限りラベルを設置したいです
![Image](data:image/svg+xml,<svg xmlns="http://www.w3.org/2000/svg" width="314" height="680"><rect fill-opacity="0"/></svg>)
Thread
Conversation
次は上で設置したのでお知らせのデザインを作ってしまいます
個人開発だし作り込むのはめんどくさいので、できる限り共通化したいので
「子ページ」という概念を作り「子ページのタイトル」を設定するだけで以下のようなシンプルなデザインで表示されるようにします
フッターなども全て消えます
![Image](data:image/svg+xml,<svg xmlns="http://www.w3.org/2000/svg" width="390" height="844"><rect fill-opacity="0"/></svg>)
![Image](data:image/svg+xml,<svg xmlns="http://www.w3.org/2000/svg" width="389" height="153"><rect fill-opacity="0"/></svg>)
![Image](data:image/svg+xml,<svg xmlns="http://www.w3.org/2000/svg" width="390" height="75"><rect fill-opacity="0"/></svg>)
クリエイター機能は最初から開放されているわけではなく、自分で登録を行うことで開放されるようにします（ハードルをもうける）
ボタン連打を回避するためにチェックマークをつけて登録を押す形にしておきます
ある程度バランス取れてきたのでヘッダー、フッターを作り込む
ヘッダーはロゴが短いのでバランスが取りづらいです
こういう時はいっそロゴを取ってしまってアイコンだけにするとバランスが良くなりますが（画像3）、サイト名が表示されない＝覚えてもらえない問題もあります
![Image](data:image/svg+xml,<svg xmlns="http://www.w3.org/2000/svg" width="680" height="453"><rect fill-opacity="0"/></svg>)
![Image](data:image/svg+xml,<svg xmlns="http://www.w3.org/2000/svg" width="332" height="1200"><rect fill-opacity="0"/></svg>)
![Image](data:image/svg+xml,<svg xmlns="http://www.w3.org/2000/svg" width="360" height="184"><rect fill-opacity="0"/></svg>)
ということで、適当にRをもじったアイコンを置いてRORという文字を隣に並べておきます
もしサイトが流行ったらデザイナーさんに発注しましょう
ついでにこの文字を拡大してfaviconにしてしまいきます
ao-system.net/favicongenerat
Twitterアイコンもこれにしてしまいましょう @ror_jp
![Image](data:image/svg+xml,<svg xmlns="http://www.w3.org/2000/svg" width="424" height="154"><rect fill-opacity="0"/></svg>)
![Image](data:image/svg+xml,<svg xmlns="http://www.w3.org/2000/svg" width="360" height="294"><rect fill-opacity="0"/></svg>)
![Image](data:image/svg+xml,<svg xmlns="http://www.w3.org/2000/svg" width="360" height="242"><rect fill-opacity="0"/></svg>)
![Image](data:image/svg+xml,<svg xmlns="http://www.w3.org/2000/svg" width="129" height="73"><rect fill-opacity="0"/></svg>)
ページ内での分岐ですが、とりあえず以下のどちらかを採用しておけばダサくなり辛いので個人開発では楽です
どちらを採用するかですが、3つ以上の項目がある場合は下、ない場合は上が良いです
2つの時に下を選択してしまうと「どちらがアクティブなのか」が直感的に分からないからです
![Image](data:image/svg+xml,<svg xmlns="http://www.w3.org/2000/svg" width="383" height="234"><rect fill-opacity="0"/></svg>)
寝ます ～fin～
続き
デザインを組む時は、つい大手サイトを参考にしがちですが「現在のフェーズ」と「1ユーザーあたりの投稿数」はきちんと意識したほうが良いです
例えばデザインを組む時に1枚目のようにダミーデータを大量に入れてバランスを考えがちですが、実際運用したら2か3が利用者の99%となるでしょう
![Image](data:image/svg+xml,<svg xmlns="http://www.w3.org/2000/svg" width="680" height="356"><rect fill-opacity="0"/></svg>)
![Image](data:image/svg+xml,<svg xmlns="http://www.w3.org/2000/svg" width="360" height="188"><rect fill-opacity="0"/></svg>)
そのページに表示されるコンテンツ数が少ないと想定されるほど1つのコンテンツの大きさを大きくするとスカスカ感が消えて良いです
例えば画像1,2のように2個ずつ、できれば画像3のように1個ずつにすると、元の画像4よりもスカスカ感が消えます
ただしその分「大きすぎる」と感じてしまうのでバランス
をとるために、プロフィールを左側に持ってくるとかありがち
これであれば左サイドバーの分だけ右の幅を狭めつつ、必要であれば2枚目のように広告を貼れるのでバランスも取れてちょうどよいです
スマホも同じで3枚目を大きすぎると感じる場合は、4枚目のように名言とか適当に置いてバランスを取ります
逆に検索やサイト内の投稿一覧などの大量にコンテンツが表示されるページに関しては実運用でもそれなりのコンテンツ数になるのである程度横並べにしたほうが良いです
その時にやりがちなのが、大手を参考にPV数とかいいね数を出す行為でこれは実運用では2枚目になり超過疎に見えます
悲しい話ですが、個人開発と言えどあなたのライバルはYoutubeだったりTwitterになるので「閲覧数 0」とか「いいね数 1」とかが大量に並んでいるとユーザーに「このサイトは流行っていないサイトだ」「使われていないサイトだ」「このサイトにコンテンツを掲載しても誰も見てくれなそうだ」と思われます
安易に大手を真似せず、出すべき数字と出さない方がよい数字はしっかり考えましょう
画像1では「動物 3件」などと書いてますが、こういった数字も省略して画像2の方が数字がないので過疎感を感じ辛いです
全体的にコンテンツが少ないうちほど数字は出さないか3枚目のように言い換えるのが鉄則です
Translate Tweet
New to Twitter?
Sign up now to get your own personalized timeline!