Facebook timeline with simple html and cssはFacebookのタイムライン表示をHTML/CSSで再現したソフトウェアです。

Facebookで導入されているタイムライン表示。最初はインパクトが強いと思うUIでしたが、慣れてくると見やすさを感じます。左右の高さをずらすことで情報の強弱を感じる面白いUIです。そんなタイムライン表示をHTML/CSSで再現したのがFacebook timeline with simple html and cssです。


メイン画面です。まさにFacebookのタイムライン風です。

Facebook timeline with simple html and cssでは表示のみならず、ページ下部までスクロールしたときの追加読み込みにも対応しています。情報はテキストの他、写真表示にも対応しています。Facebookアプリで使ってみたりしても親和性が高くていいかも知れません。

Facebook timeline with simple html and cssはHTML/CSS、Ruby製のソフトウェア(ソースコードは公開されていますがライセンスは明記されていません)です。

MOONGIFTはこう見る

人気のあるWebサービスは少なからずUIに一癖、二癖あるものが多いです。そのため、そのUIや操作性を真似ることによってデザイン的トレンドや技術的な面白さを知ることができます。真似するのはそのデザインに隠されたエッセンスを知るのに最適な方法と言えるのではないでしょうか。

特にWebサービスはHTMLの構造が見えるので真似するのは困難ではないでしょう。そして自分のサービスに活かしたり、そこから知恵を拝借して他で流用してみるのも面白そうです。特にFacebookは月間9億人以上が使っているサービスであり、そのデザインを真似るのは利用者にとっても慣れた操作性で使えるというメリットがあります。

Facebook Timeline with HTML and CSS

rmdort/facebook-timeline-html-css