![](data:image/svg+xml,<svg xmlns="http://www.w3.org/2000/svg" width="48" height="48"><rect fill-opacity="0"/></svg>)
少し話はずれますが販売サイトを作るときは主体となるのが「コンテンツ」なのか「クリエイター」なのかをしっかり考える必要があります
コンテンツが主体の場合はひたすらコンテンツを並べれば売れます（1枚目）が、クリエイターが主体の場合は逆にクリエイターの一覧を並べる必要があります
![Image](data:image/svg+xml,<svg xmlns="http://www.w3.org/2000/svg" width="680" height="334"><rect fill-opacity="0"/></svg>)
Thread
Conversation
1. 自分のサイトを利用する人がどこから来るのか？
2. コンテンツは公であるべきか？
などの軸から考えると良いです
検索流入を意識するなら「猫 スマホ 壁紙」でしょうし、個人を意識するなら「せせり イラスト」になるでしょう
今回は後者を選びます
以上から、次に考えるのは「販売ページ」「一覧ページ」「クリエイターページ」のデザインとなります
boothさんで言うなら以下の3ページがしっかり作れればあとはおまけなので適当でもOKです
（※特集で販売されているものなので貼っても大丈夫だと思いますが問題あれば教えてください）
![Image](data:image/svg+xml,<svg xmlns="http://www.w3.org/2000/svg" width="680" height="480"><rect fill-opacity="0"/></svg>)
![Image](data:image/svg+xml,<svg xmlns="http://www.w3.org/2000/svg" width="360" height="254"><rect fill-opacity="0"/></svg>)
販売ページは基本的にコンテンツを大きく見せたい……とおもいきや、大きく見せるよりも少し小さめにしたほうが上品が出るときもあります
例えば1枚目のようにとにかく大きく出すのではなく、2枚目のようにわざと小さく出す方法ですね
ついでにshadowをかけると良さげになります
![Image](data:image/svg+xml,<svg xmlns="http://www.w3.org/2000/svg" width="314" height="680"><rect fill-opacity="0"/></svg>)
上に「20/100」などと書いてありますが、デジタルコンテンツの難点として「無限にコピーできる」というものが上げられます
極論、誰かが1枚買ってweb上に放流されたらその画像を買う気はあんまりなくなってしまうという人も多いのではないでしょうか
今回はそれを解決するために→
版画で用いられる「エディションナンバー」を採用します
例えば最初に「累計100個売ります」のように数を指定して、購入した場合「x/100」の数値がランダムに割り振られます
＋買ったイラストをダウンロードする時に画像にナンバーを入れることが出来ます（もちろんオフにもできます）→従って
購入者は以下の画像1（ナンバーなし）と、画像2の両方を入手することが出来ます
簡単に言えばエディションナンバーありを持っていれば本物という感じですね。なんちゃってNFTみたいなもんです
もちろん自分でエディションナンバーを書き足せばごまかせますが、そこまでするよりは買うと思います
![Image](data:image/svg+xml,<svg xmlns="http://www.w3.org/2000/svg" width="330" height="497"><rect fill-opacity="0"/></svg>)
![Image](data:image/svg+xml,<svg xmlns="http://www.w3.org/2000/svg" width="328" height="497"><rect fill-opacity="0"/></svg>)
画像（＝販売item）のmodel設計ですが
1. 値段
2. user_id
3. 商品名
4. image_file
が最低限で、そこに+して
限定数と何個売れたかと公開、非公開フラグを持たせる
商品名は一旦10文字までにして、商品説明を持たないことでシンプルな設計にする→
1. 現実で例えばスマホケースなどを買う時にわざわざ商品名を確認することは殆どない
2. 従って本来は「商品名」すらいらない
3. しかしそれを指す個体名が無いとSNSで共有され辛くなる 例「壁紙買った」→「『猫ちゃんパーク』の壁紙買った」
4. 従って妥協し10文字程度の商品名を持つことにする
余談
Twitterログインの機能を作るときにサイトのテイストを壊したくなくて青以外でログインボタンを設定している場合がありますがその場合は「Twitterでログイン」のように「Twitter」まで文言を入れないとリアクション率が下がります
それがTwitter色を使っておくと「ログイン」だけで良くなります
![Image](data:image/svg+xml,<svg xmlns="http://www.w3.org/2000/svg" width="363" height="153"><rect fill-opacity="0"/></svg>)
![Image](data:image/svg+xml,<svg xmlns="http://www.w3.org/2000/svg" width="363" height="194"><rect fill-opacity="0"/></svg>)
本来は「ログイン」と「新規登録」を上の黒いデザインで2つ作ってそれぞれ別ページに遷移させるのが正しい振る舞いなのですが当サイトは「Twitter連携で使う気楽なサイトなんだな」という感も同時に持たせたいのでデザインを犠牲にしてもログインボタンを青色で設置します
ダサいけどトレードオフです
ついでにそのままログイン・ログアウトを作ります
twitter側でcallback URLを設定するのを忘れずに
あとは内部的にログイン、ログアウトを実装すればOKです
画像などのデータも取得できていますね
![Image](data:image/svg+xml,<svg xmlns="http://www.w3.org/2000/svg" width="360" height="354"><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>)
販売サイトの場合は「ユーザーが退会したらどうするか」を先に考えておく必要があります
パターンとして以下の2点が問題になりそう
1. itemを販売した事のある人が退会した→既に購入しているuserの購入履歴の表示
2. itemを購入した事のある人が退会した→購入されたcreatorの購入履歴での表示
どちらの対応もユーザー部分を「退会したユーザー」とだけ表示する
と決めましたのでuserが削除された場合はnullを入れるという方法にします
この場合、一度退会すると購入履歴等が消えてしまうのですがそれは問題発生時に確認できれば良いので定期バックアップを取ることで回避します
これまた余談ですが、最近はアイコン＝丸にするという風潮がありますが
四角いアイコン＝企業感、しっかりした印象
を与え
丸いアイコン＝ユーザー感、カジュアルな印象
を与えるのでクリエイターは四角いアイコン、ユーザー（購入者）は丸の方が良いか考え中です
![Image](data:image/svg+xml,<svg xmlns="http://www.w3.org/2000/svg" width="347" height="229"><rect fill-opacity="0"/></svg>)
ついでに、日本語というのは文字数の関係からどうしてもおしゃれにするのが難しい言語＋Twitterから引っ張ってきた場合は名前以外の情報が入っている場合が多く
これによりサイトのテイストを統一するのが非常に難しくなるので基本的にこういったID表示は英語を採用したい気持ちがあります
![Image](data:image/svg+xml,<svg xmlns="http://www.w3.org/2000/svg" width="358" height="167"><rect fill-opacity="0"/></svg>)
好みの問題でもあるのですが、カジュアル感とデザインのバランスでクリエイターをスーパー楕円、ユーザーを円形にすることにしました
この2つのアイコンを両方丸ではなく、それぞれ形を分ける理由は長くなるので割愛します
スーパー楕円はdaisyuiを使うと楽に実装できます
daisyui.com/components/ava
![Image](data:image/svg+xml,<svg xmlns="http://www.w3.org/2000/svg" width="339" height="125"><rect fill-opacity="0"/></svg>)
![Image](data:image/svg+xml,<svg xmlns="http://www.w3.org/2000/svg" width="927" height="218"><rect fill-opacity="0"/></svg>)
みんな悩むのが、フッターにナビゲーションバーを設置するかどうかだと思うのですが
特に理由がなければ設置しちゃうのが現代だと楽です
あとラベルをつけるか？問題ですが、これもつけたほうが良いです
「ユーザーに想像させるな、明示しろ」と言うのは何度もつぶやきながらデザインを組みましょう
Translate Tweet
![Image](data:image/svg+xml,<svg xmlns="http://www.w3.org/2000/svg" width="314" height="679"><rect fill-opacity="0"/></svg>)
![Image](data:image/svg+xml,<svg xmlns="http://www.w3.org/2000/svg" width="361" height="100"><rect fill-opacity="0"/></svg>)
![Image](data:image/svg+xml,<svg xmlns="http://www.w3.org/2000/svg" width="363" height="68"><rect fill-opacity="0"/></svg>)
Replying to
このナビゲーションバーですが、PCの場合はヘッダーに表示するか
サイドバーに持っていくのが無難ですが、個人開発だしめんどくさいのでPCも下に出しっぱなしにしておきます
![Image](data:image/svg+xml,<svg xmlns="http://www.w3.org/2000/svg" width="1916" height="51"><rect fill-opacity="0"/></svg>)
![Image](data:image/svg+xml,<svg xmlns="http://www.w3.org/2000/svg" width="360" height="340"><rect fill-opacity="0"/></svg>)
![Image](data:image/svg+xml,<svg xmlns="http://www.w3.org/2000/svg" width="360" height="196"><rect fill-opacity="0"/></svg>)
iconは
font awesomeよりも
bootstrap icon icons.getbootstrap.jp
ionicon ionic.io/ionicons
あたりのほうがおしゃれなのでおすすめ
![](data:image/svg+xml,<svg xmlns="http://www.w3.org/2000/svg" width="680" height="363"><rect fill-opacity="0"/></svg>)
あとはnaviに必要なメニューを考えます
候補は例えばこんな感じ
- TOP
- 検索
- 通知
- マイページ
- 設定
- いいねした商品
- 購入した商品
この中で「どの項目に頻繁にアクセスするか」をベースに考えていきます
例えば「通知」ですが、商品を販売するクリエイター側は1日1回以上の通知が来る可能性がありますが、基本的に大多数であるはずの購入者はそんなに通知が来ないのでヘッダーに置くくらいでちょうど良いかもしれません
そしてこっちもできる限りラベルを設置したいです
次は上で設置したのでお知らせのデザインを作ってしまいます
個人開発だし作り込むのはめんどくさいので、できる限り共通化したいので
「子ページ」という概念を作り「子ページのタイトル」を設定するだけで以下のようなシンプルなデザインで表示されるようにします
フッターなども全て消えます
![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>)
ということで、適当に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枚目のように言い換えるのが鉄則です
New to Twitter?
Sign up now to get your own personalized timeline!