PaPut ロゴ制作の流れ(探索→確定→Web/PWA/OAuth 実装)
ロゴ
デザイン
PaPut のロゴをゼロから作り Web/PWA/OAuth まで実装した流れの記録。
方向性: ミニマル・モダン、フラット単色、角丸、小サイズ判読性。キーワードは 手軽さ/知見/ぱぱっと/積み上げ/成長/スキル。
探索(没案含む): P モノグラム/bolt/stack/app icon はありきたりで却下。双葉+きらめきは要素が分離して断念。花案は星・手裏剣に見え見送り。転機は現行ロゴのドット(玉)を主役にし「メモ=知見の最小単位」に絞ったこと。
確定: 反転ブックマーク型の容器に玉を投げ込む形。受け口=保存先、玉=ぱぱっと記録するメモ、放射状3本線=投げ込む勢い。
追い込み: レンダリング→目視→数値修正の反復。玉と受け口は「肩に乗りかけ」。放射線の角度反転や玉の1pxズレを拡大確認して修正。
向き: 縦長シンボル×横組みワードマークは軸が直交してバランスが取りにくい。横ロックアップは横向き、正方形枠(favicon/アプリ/SNS/OAuth)は別バリエーションで出し分け(Duolingo/Android と同じ正攻法)。最終的にアイコンも横向き統一。
ワードマーク: LINE Seed。文字はアウトライン化してフォント非依存に(fonttools の SVGPathPen でパス化し advance width で字送り)。
実装メモ:
- Next.js App Router は src/app の favicon.ico/icon/apple-icon を規約で自動認識(パス指定不要)
- manifest のアイコンはルート相対(先頭スラッシュ)。og:image は絶対 URL
- 古い画像が残るのはキャッシュ。?v= 付与/SW キャッシュ名更新/PWA 入れ直し。favicon はホストごとに配信確認
- Apple touch icon は透過だと iOS で黒くなるので白地
- Google OAuth ロゴは 120x120 正方形、Cloud Console でアップロード、変更で再検証2〜3営業日
学び: 記号を足すより既存要素に意味を持たせ「動作」を記号化すると、シンプルさと意味を両立できる。ミニマルなロゴほど距離・角度・中心ズレの1〜2px調整が効く。小サイズとライト/ダーク両背景で判読性確認。完成後は既存ロゴとの類似確認。