チェッカーサイトをつくろう 第1回目「メインページのレイアウトを決めよう」

cssフレームワーク

Foundationを選択。
主要なcssフレームワーク
 ・bootstrap
  →通常は選択したいところだが格ゲーチェッカーさんが
  使用しているので差別化するために見送り。情報量は
  圧倒的に多い。
 ・foundation
  →勉強もかねて選択。ただしbootstrapには切り替えら
   れるようにしておく。
 ・Materialize
  →これから流行るのか??

ロゴのフォント

フォントの選択
http://coliss.com/articles/freebies/freebies-sketch-fonts-by-designbeep.html
https://fonts.google.com/
Cabin Sketchに決定
https://fonts.google.com/specimen/Cabin+Sketch
ライセンス→SIL Open Font License
https://en.wikipedia.org/wiki/SIL_Open_Font_License

アイコン

Font Awesom Iconsを利用させてもらう。
fa-podcastを選択。

faviconに変換

Font Awesome Favicon Generator
http://paulferrett.com/fontawesome-favicon/
素晴らしいサービスだが、font awesome iconsのバージョンがやや古く(v4.6.3)、新しいアイコンは使えなかった。

font awesome iconsをpngに変換するサイト
http://fa2png.io/
pngをfaviconに変換するサイト
http://app.tree-web.net/icon_converter/

また色は原色大辞典を参考にほかの動画サイトと被らない?orangered(#ff4500)を選択

メインページレイアウト

タブ

・新規登録者(例:1カ月以内)
 →機能は未実装(classで分ける予定)。
・ユーザー登録
 →機能は未実装。SNS連携の際に実装予定。
・某チェッカーのように1次・2次をわけるか?
 →うまくやれば配信者のモチベ向上にもつながるが、昇格基準の選定が難しい。とりあえず保留か。
・勝手な登録・情報改ざん対策は?
 →twitterアカウントに紐づけする予定。

上部に告知機能

 動画プレイヤーをメインページにつけるのは嫌がる人が多そうなので見送り。

SNSアイコン

twitter・facebook・pocket・google-plus・feedのアイコンを設置。リンクはまだ。

その他

 データベース更新作業終了
 メモ:twitchの更新だけなぜか異常に時間がかかった。

まとめ

 メインページのレイアウトはとりあえず完了。
 テスト配信でつながらなくなったが、配信者側の問題の可能性が高い(サーバーの問題ではないようだ)。
 ラグ確認テストはsocket接続を実装するまで見送り。

TODO

 twitch更新の見直し
 SNSアイコンのリンク
 新規登録者(一カ月以内)のクラス分け
 →登録フォーム実装時でも良いか
 youtubelive配信の画質
 告知スペースの活用
 開始・終了時刻・配信時間の実装

twitterでも告知を出そうと思うのでよろしくお願いします。
@broad_tube

シェアする

  • このエントリーをはてなブックマークに追加

フォローする