写真や動画つきのつぶやきが楽しめる国産Webサービス「シャッター」制作ウラ話


昨年、

写真や動画つきのつぶやきが楽しめる国産Webサービス「シャッター」

というサイトがオープンしたのをご存知ですか?

http://shtt.jp/

twitterで写真や動画つきのつぶやきが楽しめる国産Webサービスです!

写真も動画もどっちの投稿もおまかせ!!

PCだけでなく、もちろん携帯での閲覧、投稿にも対応しています!

動画も写真も自動的に適切な形に変換するので
携帯でもスマートフォンでもラクラク見れますよ☆

あなた専用の投稿用メールアドレスを発行しますので
携帯からの投稿も楽々です♪♪

まだまだユーザーさん少ないので、みんなぜひ使ってくださいねー!><。

http://shtt.jp/

ということで。

説明が長くなりました、このシャッター、
これまでひとりで作ってきたお役に立ちますでしょうかシリーズ同様
お仕事関係ないプロジェクトなのですが、

はじめて人と一緒に作りました!

今回、福岡のプログラマさん、@rytichに声をかけていただき、
私はデザインとコーディング、jQueryでの動きの実装などなどを担当しています。

このシャッターですが、オープンしてまだ日が浅いにもかかわらず、

年末、PC版のデザインををリニューアルしました!

できて早々デザインリニューアルした理由

シャッターはcakePHPで作られているのですが、
携帯でのアクセス時は携帯用のCSSをインラインで書き出すこともできるので
携帯・PCともにビュー部分は同じテンプレートを使って、
CSSだけでデザインを切り替えよう!としていたのです。

が…。

携帯とPC、画面サイズも違えば操作方法も違う2つを
CSSだけで切り替えてみせるというのは難しく、
見栄えが(特にPC版が)中途半端なものになってしまっていました…。

トップページに新着一覧を載せる方法や件数も
やっぱり携帯とPCが同じではこれもどちらも中途半端なことになってしまいました。

結果、PC版と携帯版のテンプレートをわけることになり、
PC版だからこそできることをとりいれたデザインを作ることにしたのですが、
ある程度ユーザーさんが集まって、投稿が集まるようになってからじゃないと
新着写真にずっと同じ写真が表示されっぱなしになってしまう…という懸念事項もあったため、すこしずつですがユーザーさんが増えてきたこのタイミングでのデザイン刷新となりました。

使ってくださっている皆さん、本当にありがとうございます!><

ということで、新デザインはこんな感じです。

デザインテーマなど

  • twitterと連携させて使うサービスであることが分かりやすいよう、ブルー系
    →twitterが鳥のアイコンなので、デザインは空をイメージ
  • ロゴもtwitterのロゴ同様丸みを帯びたもの

というコンセプトでデザインしてみました。

画像の見せ方試行錯誤

携帯版も同様なのですが、サムネイルをどうするかとても悩みました。

正方形に切り抜くか、切り抜かずにリサイズか…

正方形に切り抜きは見た目にはとっても綺麗なのですが、
切り抜くことによって撮ったものの位置、構図が変わってしまうのが個人的にはイヤだったので、
切り抜きはなしで、一定サイズの正方形に収まる最大のサイズでサムネイルを作る仕様になりました。

これはどっちがいいのかいまだ悩み中です。

みなさんは切り抜いて正方形とどちらがお好みですか??

この配置にするために、縦方向の中央揃えが必要になったので、
これもjQueryで対応しています。

こちらの記事を参考にさせていただきました!

jQueryでボックスの中の画像の縦位置を中央に揃える
http://www.tinybeans.net/blog/2010/06/21-120821.html

ソーシャルブックマークいろいろ

twitter以外でもいろいろなところで簡単に共有できるよう、いろいろ用意しました。

ほかにもjQueryでいろいろ

■サムネイルにマウスオーバーで説明ポップアップ

PC版と携帯版を切り替えたので、
ちょっとしたところにjQueryを使って、使いやすくなる工夫をしてみました。

サムネイルにマウスオーバーすると投稿者名と文章がぱぱっと見れるようにしました。
こちらの記事を元に実装しています。

http://www.kriesi.at/archives/create-simple-tooltips-with-css-and-jquery

■スライドしていくトップページの新着一覧

みんなの新着写真、みんなの新着動画の部分は、
jCarouselを使ってスライド表示させています。

http://sorgalla.com/projects/jcarousel/

■背景を動かしてみたり

雲の部分を動かしてみたりしました。
処理はこのあたりの記事が参考になります!

http://www.queness.com/post/2607/create-background-scrolling-effect-with-jquery

こんな感じで、ちょこちょこと改良中です!

説明ページやら投稿ページなど、
大事な部分にまだデザインの反映が行き届いていない…なんて部分もあるのですが
時間を見つけて鋭意改良中です!

みなさんも是非使ってみてください!

フィードバックいただけるとうれしいです♪

私の投稿した写真&動画の一覧ページはこちらです☆
http://shtt.jp/user/yuki930

.

.

.

ちなみにこの「シャッター」で
お仕事以外で個人的に作ったサイト10個目になりました☆

.

.


こちらの記事もおすすめです

このブログで人気の記事です

コメント(Facebookのコメント機能を利用しています)

»

«


↓その他運営中のサイトのご紹介

Fireworksマニア Webサイトからカラーを抽出!分析!Web Site Color Picker PHOTO STOCKER -高解像度の無料写真素材- 壁紙カレンダー -デスクトップを飾る、サイズ豊富なデスクトップ壁紙- シンプルパターン研究所 -PhotoshopやFireworksで便利に使えるテクスチャ素材-
スタイルシート見出しメーカー -好きな色で作れる、あなた用のCSS見出し- ビビッドカラーズ -キュートなホームページ素材配布サイト- Android用の壁紙無料ダウンロードサイト Webデザイナー山口有由希のポートフォリオサイト