![](data:image/svg+xml,<svg xmlns="http://www.w3.org/2000/svg" width="48" height="48"><rect fill-opacity="0"/></svg>)
Twitterの開発者登録の審査通ってたので、土日中に一個サービスを作って公開することを誓います
Thread
Conversation
Replying to
1.ドメインを取得
今回は hitoritter.com というドメインにして、cloudflareで管理します
2. s3のバケットを作成
画像はaws s3を使うのが楽で良いです
3. render.com or herokuでサクッとスケルトンを動かす
4. TwitterアカウントをTwitter developerとして申請←ここまで
![Image](data:image/svg+xml,<svg xmlns="http://www.w3.org/2000/svg" width="416" height="900"><rect fill-opacity="0"/></svg>)
1
17
◆開発の流れ
1. デザインテイストを決める
今回は「自分一人で使うためのTwitter」がテーマなのでTwitterにできるだけ寄せたテイストにする
そうすればユーザーはいつもの気持ちで使ってくれる
具体的には「背景色、padding、アイコンや画像のサイズ、画像が角丸か円か」などを寄せると違和感が減る
1
9
2. 機能の検討
基本的に必要なのは
・ツイート（投稿）機能
だけになる
ただ、Twitterと世界観を似せるためにはアイコンやIDや表示名がないと違和感が出てくる
それらをわざわざ登録させるのは大変なのでTwitter連携アプリとする事で名前やアイコンを連携時に取得してそれを出す事で手間をなくす
1
8
3. 付随機能を検討
表示名やIDを入力させるのであればそれを編集する設定ページが必要となる
・設定
ついでに退会や利用規約も欲しい
・退会
・利用規約
・プライバシーポリシー
登録ログインも必要
・登録/ログイン
aboutページ（このサービスの紹介）は非ログイン時のトップページを兼用↓参考
![Image](data:image/svg+xml,<svg xmlns="http://www.w3.org/2000/svg" width="415" height="900"><rect fill-opacity="0"/></svg>)
1
1
6
4. ロゴを決める
世界観を出すのにロゴは大切なので最初に決める（とりあえず仮置きでも良いので）
と言っても個人開発で発注するのはコスト高いので
日本語であれば
tameshigaki.jp
英語は
fonts.google.com
ここにサイト名を入れて世界観が合うまで一生探す
今回はこれに決めた
1
5
32
5.画像を探す
自分のサイトの世界観に合う画像を探す
例えば同じタヌキのイラストでもテイストにより大幅に印象が変わる
実際にサイト上で使わなくてもいいので「自分のサイトに置いて違和感のないイラストはどれか？」を予め決める事でサイトのテイストがぶれなくなる
初心者さんには特におすすめ
1
8
6. cssフレームワークの選定
今回は世界観重視なので採用しないが、ポイント的に使えるフレームワークは割とある
例えばsemantic uiのフォームだけ使ったりはよくする
cdnでformだけ読み込むと楽
作り込みが必要なドロップダウンなんかもすぐ実装できる
semantic-ui.com/collections/fo
1
9
7. 必要なページを洗い出して紙に落とし込む
ペーパープロトタイピングまで行かなくて良いのでとりあえず100均の自由帳に必要なページを全て書き出しましょう
脳内メモリの無駄遣いを避けつつ、達成感が出つつ、目標がクリアになるので非常におすすめです
![Image](data:image/svg+xml,<svg xmlns="http://www.w3.org/2000/svg" width="680" height="680"><rect fill-opacity="0"/></svg>)
1
8
（ちなみに今回はこのイラストに合うようなテイストでデザインを組もうと考えてます
色は輝度を下げつつ、白黒に近い色をメインで使ってアクセントに1色だけ（恐らく青）というTwitterと似たようなデザインテイストになるかなーと思います。グラデーションとかは違う感じがしますね）
1
1
10
7-2. 実際に書いた例
とりあえず必要なページはこれだけだと思うので紙に雰囲気を書き出す
めんどくさくなるので作るのが簡単な所から作る
![Image](data:image/svg+xml,<svg xmlns="http://www.w3.org/2000/svg" width="510" height="680"><rect fill-opacity="0"/></svg>)
1
14
余談だが、利用規約とかヘルプとかポリシーとかの修正/運用はエンジニアボールではなく、法務とかがボールを持っているのでエンジニアがいないと修正できないようなハードコーディングをせずにzendesk等のヘルプセンターに投げるか、microCMSに投げるか、なんならgoogle docを読み込む等が実運用では楽
1
14
今回はテンプレ的な利用規約（保証なし、責任なし、ハッキングしないで、サイト表示のために著作権必要だよ）を載っけるだけで今後更新されることはほぼないのでベタ書きを採用します
こんな感じで利用規約を起きます。これで上の紙を1枚捨てられるのであと4枚です
1
7
プライバシーポリシーも作成。これであと3枚です
ついでにヘルプページ（利用規約とプライバシーポリシーにアクセス出来るだけ）も作っておきます
無限ロードにした場合はドキュメントにたどり着きづらくなるのでパンくずリストを入れてやって相互に移動しやすくすると良いですがとりあえずやらない
1
7
New to Twitter?
Sign up now to get your own personalized timeline!
![](data:image/svg+xml,<svg xmlns="http://www.w3.org/2000/svg" width="240" height="135"><rect fill-opacity="0"/></svg>)
![](data:image/svg+xml,<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24"><rect fill-opacity="0"/></svg>)
![](data:image/svg+xml,<svg xmlns="http://www.w3.org/2000/svg" width="86" height="120"><rect fill-opacity="0"/></svg>)
![](data:image/svg+xml,<svg xmlns="http://www.w3.org/2000/svg" width="120" height="90"><rect fill-opacity="0"/></svg>)