個人開発の覚え書き

せせり｜※発言は個人web開発者のバッドノウハウです @sesere115

販売ページは基本的にコンテンツを大きく見せたい……とおもいきや、大きく見せるよりも少し小さめにしたほうが上品が出るときもあります 例えば1枚目のようにとにかく大きく出すのではなく、2枚目のようにわざと小さく出す方法ですね ついでにshadowをかけると良さげになります pic.twitter.com/jsGqfuMkAi

拡大

拡大

拡大

せせり｜※発言は個人web開発者のバッドノウハウです @sesere115

上に「20/100」などと書いてありますが、デジタルコンテンツの難点として「無限にコピーできる」というものが上げられます 極論、誰かが1枚買ってweb上に放流されたらその画像を買う気はあんまりなくなってしまうという人も多いのではないでしょうか 今回はそれを解決するために→

せせり｜※発言は個人web開発者のバッドノウハウです @sesere115

版画で用いられる「エディションナンバー」を採用します 例えば最初に「累計100個売ります」のように数を指定して、購入した場合「x/100」の数値がランダムに割り振られます ＋買ったイラストをダウンロードする時に画像にナンバーを入れることが出来ます（もちろんオフにもできます）→従って

せせり｜※発言は個人web開発者のバッドノウハウです @sesere115

購入者は以下の画像1（ナンバーなし）と、画像2の両方を入手することが出来ます 簡単に言えばエディションナンバーありを持っていれば本物という感じですね。なんちゃってNFTみたいなもんです もちろん自分でエディションナンバーを書き足せばごまかせますが、そこまでするよりは買うと思います pic.twitter.com/9QfDiqn2P2

拡大

拡大

せせり｜※発言は個人web開発者のバッドノウハウです @sesere115

画像（＝販売item）のmodel設計ですが 1. 値段 2. user_id 3. 商品名 4. image_file が最低限で、そこに+して 限定数と何個売れたかと公開、非公開フラグを持たせる 商品名は一旦10文字までにして、商品説明を持たないことでシンプルな設計にする→

せせり｜※発言は個人web開発者のバッドノウハウです @sesere115

1. 現実で例えばスマホケースなどを買う時にわざわざ商品名を確認することは殆どない 2. 従って本来は「商品名」すらいらない 3. しかしそれを指す個体名が無いとSNSで共有され辛くなる　例「壁紙買った」→「『猫ちゃんパーク』の壁紙買った」 4. 従って妥協し10文字程度の商品名を持つことにする

せせり｜※発言は個人web開発者のバッドノウハウです @sesere115

余談 Twitterログインの機能を作るときにサイトのテイストを壊したくなくて青以外でログインボタンを設定している場合がありますがその場合は「Twitterでログイン」のように「Twitter」まで文言を入れないとリアクション率が下がります それがTwitter色を使っておくと「ログイン」だけで良くなります pic.twitter.com/RRLGwYkBLH

拡大

拡大

せせり｜※発言は個人web開発者のバッドノウハウです @sesere115

本来は「ログイン」と「新規登録」を上の黒いデザインで2つ作ってそれぞれ別ページに遷移させるのが正しい振る舞いなのですが当サイトは「Twitter連携で使う気楽なサイトなんだな」という感も同時に持たせたいのでデザインを犠牲にしてもログインボタンを青色で設置します ダサいけどトレードオフです

せせり｜※発言は個人web開発者のバッドノウハウです @sesere115

ついでにそのままログイン・ログアウトを作ります twitter側でcallback URLを設定するのを忘れずに あとは内部的にログイン、ログアウトを実装すればOKです 画像などのデータも取得できていますね pic.twitter.com/tPhMcKNL6F

拡大

拡大

拡大

せせり｜※発言は個人web開発者のバッドノウハウです @sesere115

販売サイトの場合は「ユーザーが退会したらどうするか」を先に考えておく必要があります パターンとして以下の2点が問題になりそう 1. itemを販売した事のある人が退会した→既に購入しているuserの購入履歴の表示 2. itemを購入した事のある人が退会した→購入されたcreatorの購入履歴での表示

せせり｜※発言は個人web開発者のバッドノウハウです @sesere115

どちらの対応もユーザー部分を「退会したユーザー」とだけ表示する と決めましたのでuserが削除された場合はnullを入れるという方法にします この場合、一度退会すると購入履歴等が消えてしまうのですがそれは問題発生時に確認できれば良いので定期バックアップを取ることで回避します

せせり｜※発言は個人web開発者のバッドノウハウです @sesere115

これまた余談ですが、最近はアイコン＝丸にするという風潮がありますが 四角いアイコン＝企業感、しっかりした印象 を与え 丸いアイコン＝ユーザー感、カジュアルな印象 を与えるのでクリエイターは四角いアイコン、ユーザー（購入者）は丸の方が良いか考え中です pic.twitter.com/ljWShO3Kf4

拡大

せせり｜※発言は個人web開発者のバッドノウハウです @sesere115

ついでに、日本語というのは文字数の関係からどうしてもおしゃれにするのが難しい言語＋Twitterから引っ張ってきた場合は名前以外の情報が入っている場合が多く これによりサイトのテイストを統一するのが非常に難しくなるので基本的にこういったID表示は英語を採用したい気持ちがあります pic.twitter.com/7J6sYRdH4a

拡大

せせり｜※発言は個人web開発者のバッドノウハウです @sesere115

好みの問題でもあるのですが、カジュアル感とデザインのバランスでクリエイターをスーパー楕円、ユーザーを円形にすることにしました この2つのアイコンを両方丸ではなく、それぞれ形を分ける理由は長くなるので割愛します スーパー楕円はdaisyuiを使うと楽に実装できます daisyui.com/components/ava… pic.twitter.com/Pxa44oiCk0

拡大

拡大

せせり｜※発言は個人web開発者のバッドノウハウです @sesere115

みんな悩むのが、フッターにナビゲーションバーを設置するかどうかだと思うのですが 特に理由がなければ設置しちゃうのが現代だと楽です あとラベルをつけるか？問題ですが、これもつけたほうが良いです 「ユーザーに想像させるな、明示しろ」と言うのは何度もつぶやきながらデザインを組みましょう pic.twitter.com/h54knWxvvF

拡大

拡大

拡大

せせり｜※発言は個人web開発者のバッドノウハウです @sesere115

このナビゲーションバーですが、PCの場合はヘッダーに表示するか サイドバーに持っていくのが無難ですが、個人開発だしめんどくさいのでPCも下に出しっぱなしにしておきます pic.twitter.com/87ITbChI0x

拡大

拡大

拡大

せせり｜※発言は個人web開発者のバッドノウハウです @sesere115

iconは font awesomeよりも bootstrap icon icons.getbootstrap.jp ionicon ionic.io/ionicons あたりのほうがおしゃれなのでおすすめ

せせり｜※発言は個人web開発者のバッドノウハウです @sesere115

あとはnaviに必要なメニューを考えます 候補は例えばこんな感じ - TOP - 検索 - 通知 - マイページ - 設定 - いいねした商品 - 購入した商品 この中で「どの項目に頻繁にアクセスするか」をベースに考えていきます

せせり｜※発言は個人web開発者のバッドノウハウです @sesere115

例えば「通知」ですが、商品を販売するクリエイター側は1日1回以上の通知が来る可能性がありますが、基本的に大多数であるはずの購入者はそんなに通知が来ないのでヘッダーに置くくらいでちょうど良いかもしれません そしてこっちもできる限りラベルを設置したいです pic.twitter.com/DvokVpHQYH

拡大

拡大

拡大

せせり｜※発言は個人web開発者のバッドノウハウです @sesere115

次は上で設置したのでお知らせのデザインを作ってしまいます 個人開発だし作り込むのはめんどくさいので、できる限り共通化したいので 「子ページ」という概念を作り「子ページのタイトル」を設定するだけで以下のようなシンプルなデザインで表示されるようにします フッターなども全て消えます pic.twitter.com/D1IM1Csq5s

拡大

せせり｜※発言は個人web開発者のバッドノウハウです @sesere115

これまた細部の話ですが 重なる数字の部分は白いボーダーで囲ってやるだけで視認性がほんのちょっと向上します pic.twitter.com/pWjaeRdiCZ

拡大

拡大

せせり｜※発言は個人web開発者のバッドノウハウです @sesere115

あとは設定と表示名、アイコン設定などを実装する ログアウトも実装する pic.twitter.com/bCMwRMpzki

拡大

拡大

拡大

せせり｜※発言は個人web開発者のバッドノウハウです @sesere115

クリエイター機能は最初から開放されているわけではなく、自分で登録を行うことで開放されるようにします（ハードルをもうける） ボタン連打を回避するためにチェックマークをつけて登録を押す形にしておきます pic.twitter.com/H5xkXMxLP8

拡大

拡大

せせり｜※発言は個人web開発者のバッドノウハウです @sesere115

ある程度バランス取れてきたのでヘッダー、フッターを作り込む ヘッダーはロゴが短いのでバランスが取りづらいです こういう時はいっそロゴを取ってしまってアイコンだけにするとバランスが良くなりますが（画像3）、サイト名が表示されない＝覚えてもらえない問題もあります pic.twitter.com/aLVCbBk8dH

拡大

拡大

拡大

せせり｜※発言は個人web開発者のバッドノウハウです @sesere115

ということで、適当にRをもじったアイコンを置いてRORという文字を隣に並べておきます もしサイトが流行ったらデザイナーさんに発注しましょう ついでにこの文字を拡大してfaviconにしてしまいきます ao-system.net/favicongenerat… Twitterアイコンもこれにしてしまいましょう @ror_jp pic.twitter.com/XfL9nQ8KbF

拡大

拡大

拡大

拡大