Thread
Conversation
![](data:image/svg+xml,<svg xmlns="http://www.w3.org/2000/svg" width="48" height="48"><rect fill-opacity="0"/></svg>)
Replying to
残っているのはタイムラインとログインの２個だけです
ログインは特にviewが存在しないロジックなので内部だけなんですが、これを組むためにはTwitterからどんな情報を取得して保存する必要があるのかを決めないといけないので（一旦全部保存という手段もアリです）先にタイムラインを組みます
1
3
タイムラインのデザインはhello talkというアプリを参考にします
個人的にpadding（隙間の取り方）が非常に優秀だと感じます
普段から色んなアプリをとにかく入れておいて頭の片隅に「このデザイン良かったな〜」という索引を作っておくと引き出しが増えて良いです
![Image](data:image/svg+xml,<svg xmlns="http://www.w3.org/2000/svg" width="415" height="900"><rect fill-opacity="0"/></svg>)
2
12
すっかり忘れてましたが、設定ページを作る必要がありましたので適当にヘッダーにアイコンを置いて、クリックしたら設定とログアウトを表示します
![Image](data:image/svg+xml,<svg xmlns="http://www.w3.org/2000/svg" width="320" height="568"><rect fill-opacity="0"/></svg>)
1
適当にinputをペタペタ置いて設定の変更も出来るようになりました
![Image](data:image/svg+xml,<svg xmlns="http://www.w3.org/2000/svg" width="375" height="812"><rect fill-opacity="0"/></svg>)
1
2
個人的に「このページで何が出来るか」が明確な方が好きなので
スマホアプリでよくあるような、フッターが無くヘッダーが戻るボタン付きのタイトルになっているデザインにしたいと思います
ここは好みの問題ですね
![Image](data:image/svg+xml,<svg xmlns="http://www.w3.org/2000/svg" width="314" height="680"><rect fill-opacity="0"/></svg>)
1
6
また余談になるのですが
LP的なページはフォントにもこだわったほうが世界観が出て良いです
めんどくさいのできっちりやる必要はないですが、google fontのフォントで適当に選ぶだけでも世界観が出てきます
fonts.google.com/?subset=japane
1枚目 デフォ
今回は RocknRoll One （4枚目）にしてみました
2
1
9
余談その２
こういった設定ページ等を作り込む（例えば画像を選択したら上のアイコンがリアルタイムに変わるなど）必要性はほぼ無いです
もちろんあったら便利ですがそれは「他にやることが全て終わって、最後の最後にもうほんの少しクオリティを上げる」ためにやる事です
料理で言えば「ごま」です
![Image](data:image/svg+xml,<svg xmlns="http://www.w3.org/2000/svg" width="580" height="680"><rect fill-opacity="0"/></svg>)
1
4
設定ページが使いやすいからサイトを使う人はこの世にほぼ存在しません
設定ページが使いづらいからサイトを離脱する人もほぼ存在しません
こういう細かいところよりも「この機能が使いやすいからこのサイトを使う」というコア部分の改善に力を使いましょう
1
1
11
余談その３ デザイン
そんなに凝る必要は無いですが「使うのが辛い」と感じるラインは超えないといけません
駆け出しの方が作るデザインでありがちなのが2枚目のようなもので、これだと登録してくれる人は-96%くらいになります
センスが無くても良いですが、センスの良いサイトを真似はしましょう
1
17
ということでデザインをガーッと組むとこんな感じ
1
5
- 投稿日時
- 削除ボタン
が必要なのでそれらができそうなものを設置
これも余談ですが、デザインは「他と被ってはいけない」ではなく「できるだけ業界標準に合わせる」方が良いです
ユーザーに「これは何の機能だろう」とか「これをやるためにはどうすればいいんだろう」とか悩ませてはいけません
1
14
タイムラインのデザインが固まったのでサクッと投稿機能を作成
とりあえず投稿に対応します
1
6
もしも作り込むのであればこう言うところを作り込むと良いです
初めてアクセスしたユーザーほど何をすれば良いのか分からないので、最初に何をやるのかを明示してあげてチュートリアル的にしてしまえば離脱率が下がります
1
11
ログインに必要なTwitterから取得すべきデータが
- アイコン画像
- ID
- 表示名
- メールアドレス
と定まったので（他にもoauthトークンなども）ログイン機能を作成
※メールアドレスを取得する理由は「Twitterアカウント消しちゃいました！どうすればいいですか！！」系の問い合わせ対応のため
1
9
Twitter連携時のここの説明文、アプリの説明を書く人が多いですが「【拡散希望！】こんなに権限必要ないですよね？これはスパムアプリです！通報して下さい！」みたいな勘違いによるツイートがTwitterではかなり多く、それで通報されるとアプリが止められるので権限に関する説明に割いたほうが良いです
![Image](data:image/svg+xml,<svg xmlns="http://www.w3.org/2000/svg" width="574" height="680"><rect fill-opacity="0"/></svg>)
1
3
14
本番では色々な「想定外」が発生します
よくある想定外は、開発中は短い単語でデザインを組んでいたから気付かなかったけど本番ではめちゃくちゃ長い名前などを使う人がいてデザインが崩れる問題です
いくつか対処法がありますがひとりったーの場合は名前部分は雰囲気で出してるだけなので省略します
1
4
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>)