月別: 2011年1月

あのWordCampが今年も福岡にやってきます！
今年は2011年2月19日、九州産業大学にて開催です！

ということで、今年はなんと！サイトデザインとコーディングを担当させていただきました…！！

このデザインにした理由と作業の流れ等を書いておきたいと思います。

デザインを起すにあたって

今年のキーワードは【Publish】です。

WordPressが、自身を「Blog Tool and Publishing Platform」とうたっていること、近年さまざまなPublishの方法がうまれてきていることなどから、今年は、【Publish】をテーマに、デザインやアイディアが生み出されるまでの過程にも焦点をあてていこう！ということのようです。

Skypeで様々なアイディアを頂く

Skypeで会議をしました。
それぞれが【Publish】という言葉に持つイメージやサイトの方向性について話していきました。

以下のような様々な意見が出ました。

• アイデアを生み出してそこから広い範囲に伝えていくまでのプロセスにもスポットを！
• 誰でもアイデアを、好きなようにパブリッシュできるよ、という流れで
• パブリッシングなので、落ち着いた感じよりももっと躍動的な感じ?
• アイデアを生み出してそこから広い範囲に伝えていくまでのプロセス
• かめはめ波なイメージだなぁ。→パブリッシュ
• 僕はあまり激しいイメージ無いけどな、紡ぐっていうイメージ持ってるので
• ピープルズパワー的な、土一揆的な激しいイメージ
• どちらかというと、縁の下の力持ち的なイメージです
• 革命です！

上記を元にデザインを考える

革命といえばもうこのフランス革命のイメージが一番に出てきたのですが…

お話を聞いてみて、全体を通して感じたことは、今回のテーマに関して

「みなそれぞれの感じ方や考え方、思いがあり、それぞれに個性豊かに表現している」

なぁということでした。

そこで、

WordPressの使い方や、そもそもなにを使ってPublishするのかは十人十色。
形にとらわれず、いろんな方法で、自分なりに、あなたもPublishしてみませんか？
そんなきっかけになるイベントですよー！

ということをデザインで表現できたら一番よいのではないか、と考えました。

そんなことを考えながら、紙にぐりぐりとイメージを書きなぐっていき…
今回のいろんな形、いろんな色のあるにぎやかなデザインの原案が完成しました。

ロゴは、様々なフォントを使い、いろいろな色、大きさを組み合わせたものに。

メインビジュアルはカラフルな鉛筆や本を使用することにより、
いろんな色（表現方法）があり、それは人それぞれ、というイメージを表してみました。

気軽に遊びにきてもらえる雰囲気にしたかったので、
あまり難しいイメージになりすぎないよう
手書き風のやわらかさのある線＆紙のようなテクスチャで親しみやすい感じを出しました。

でも書体は明朝体でしっかりとしたイベントであるイメージも残し、

熱い気持ちで開催している!というメンバーの気持ちも
右上の旗で表現してみました。

コーディングする

今回のデザインは、影や質感のあるパーツが多かったこともあり、
透過pngを多用しました。

一応IE6でも問題なく見られるよう、
透過pngに関してはDD_belatedPNGというjavascriptを使って対応しました。

あと、はソースを見る人がきっといる！と思ったので、
コメント欄にちょっと文字を入れておきました。

HTML5でやってみようかとも思ったのですが、
時間もなかったこともあって、今回できませんでした…。

かわりにValidなHTMLになるようには気をつけました。

テーマ化する

テーマ用のページは、トップページ、記事ページ、ページ用ページの3パターンをつくりました。
この状態で@takayukisterさんにお渡しし、登録用の処理などを追加していただきました。

公開＆参加登録受付中です

ということで、こんなかたちで出来上がり、
現在公開中＆参加登録受付中です。

WordPressを使ったことがない、という方にも楽しんでいただける
インストール体験ワークショップや、
午前中は、その場にいるメンバーでテーマを決め、話を進めていくアンカンファレンスというおもしろい試みも予定されています。

セッションもWordPressの話だけにとどまらず、
様々なジャンルの方々が、いろいろな方面からお話をしてくださいます。

みんなボランティアで運営していて、いいイベントにするべく、一生懸命準備しています。

年に一度の楽しいお祭りです。
ぜひ、お越し下さいね。

WordCamp Fukuoka2011
http://2011.wordcampfukuoka.com/

2011年2月19日　九州産業大学にて開催

参加料は1000円です。

当日は、大教室（メインセミナー）中教室×２（ミニセミナー）、ワークショップ会場

去年はテーマの作り方について発表させていただいたのですが、
実は今年も中教室で30分ほどお時間を頂いたきました。
今年は、今回のこのサイトができるまでの流れの詳細や、
WordCamp運営に関わることのよいところなどを
お伝えする時間にできれば思っています。

お時間のある方はお立ち寄りいただけますと幸いです^^

ちょこちょこ出掛けてはいるものの、そのことをさっぱり記録に残していないYUKIです。こんにちは！

今日は、先日雪の降る中長崎バイオパークに出掛けてきました！

園内にいる白いアルパカさん！
あんまりやる気ない感じがとてつもなくかわいいw

長崎バイオパークは高速の大塔インターを降りて車40分ぐらいいったところにあります。
福岡市内からだと高速使ってトータル2時間ちょっとぐらいでしょうか。

高速使って車でバビュンといってきました！

私は実家が佐世保なので、福岡から佐世保まで高速を使って帰省するので、割引に詳しくなったのですが、このへんのことを知らない方が結構多いので、この記事の最後にメモとして書いておきました☆
福岡にお住まいの方はぜひご覧下さい☆

ということで、長崎バイオパークのお話。

春や秋はとってもにぎわっているバイオパークですが、
この日は冬の、しかも予報も雪ということもあって、お客さんはすくなめ…

でもめげずに動物達めざして進みます！

バイオパークの中では、こういうがちゃがちゃでエサを買って、それぞれの動物にあげることができます。
１つ百円。

小銭をたくさん用意しておくことをおすすめします…！

早速からまれる！w

のんびりしていてついたのが14時頃になってしまったのですが、
カピバラさんの露天風呂タイムがなんと15時まで！！！

他の動物達との交流はちょっと後回しにして先を急ぎます。

ずんずん行くと…

い、いたー！！！！！！！！

がっつり入浴中ですw

かわえぇ…！

みんないい顔してましたw

カピバラさんを堪能したところで、道を戻ってまずはモルモットコーナーへ。

もきゅもきゅゆうとりますがな…！！！！

モルモットさんにエサをあげたり、だっこしたりできます。

そっと、そーーーっと。。。

うひゃー！！！！！

あったかいです…！

つづきまして、ペットふれあいコーナーへ。

この建物、別途200円入場料が必要なのですが…

200円以上の価値があります…！！！

超もふもふしたうさぎ。
一生懸命にんじんをたべています…

あ、落としたww

こちらもまた種類の違ったもふもふうさぎ。

だっこしたり、さわったりできます。

ほかにもこんな子たちが！

ねずみとねこは扉を隔てて隔離してありましたwねんのためw

やぎさんとカメレオンさん。

カメレオンさん、さわれるんですよ…！
あぁ、なんていい顔…！

たまに不思議なことを喋るオウムさんもいらっしゃいましたw

十分すぎるほどに満喫したところで暖かい部屋を出て、再び屋外へ。

雪降ってる…！

さ、さむい…！！！

しかしめげずにアライグマにエサをあげたり。

一生懸命走るレッサーパンダをみたりw

体をあたためているのかしら？

リスザルのコーナーでは、

「入ってもいいけどこの中でなにがおきても知らないよ！」的な注意書きが。

その理由は…

超寄ってくるw

エサを買った瞬間にこんな感じ。

気分はまるで猿使い。

レーズンをおいしそうに食べています。

冬でお客さんがすくなめだったこともあってか、
エサを買うとみんなすぐ寄ってきてくれてこれでもか！！！というぐらい動物達とふれあうことができました。

人が多いときはみんなおなかいっぱいであんまり寄ってきてくれなかったりするので…

寒いけど、今の時期おすすめです！！

入園料は大人1600円。
中高生は1000円、小学生以下は700円です。

しっかり防寒してぜひ遊びにいってみてくださいね！

長崎バイオパークホームページ
http://www.biopark.co.jp/

☆おまけ☆

福岡→佐世保間の高速道路料金の話。

今、佐世保方面へはとってもオトクに行けるんですが、知らない方が結構多いのでメモ。

武雄北インターから佐世保中央インターまでは社会実験で0円区間になっています☆

古賀インターから武雄北インターまでの距離は100km以下（91.1km）なので、
通勤割りの対象距離なのです☆

入口料金所または出口料金所を午前6時～午前9時までの間または午後5時～午後8時までの間に通過すると半額で乗れちゃいます☆

こんな感じ↓

普通車の料金

古賀→武雄北方=2500円（半額だと1250円）
福岡→武雄北方=2250円（半額だと1130円）
太宰府→武雄北方=1950円（半額だと980円）

軽自動車の料金

古賀→武雄北方=2050円（半額だと1030円）
福岡→武雄北方=1800円（半額だと900円）
太宰府→武雄北方=1600円（半額だと800円）

インターまで遠い！という方で、市内から太宰府まで都市高速を使った場合、これに＋600円です。

平日しかお休みじゃない方もETCの特典を受けてぜひ佐世保へ！！！！！

日帰りで十分楽しめます☆

ハンバーガーやちゃんぽんを食べて、
バイオパークやハウステンボス、海きららやパールシーリゾートなど
いろいろ出掛けてみてくださいね☆

。。。

こういうお出かけ、
いつも友達と団体で出掛けているのですが、
毎度「社員旅行ですか？」ときかれますw

が、しかし！

今回は！

「学生さんですか？」

って聞かれました！

ちょっとだけテンションがあがりましたが、はしゃぎすぎていたからだとすぐ気付いてちょっとだけ反省しましたw

昨年、

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

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

http://shtt.jp/

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

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

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

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

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

まだまだユーザーさん少ないので、みんなぜひ使ってくださいねー！＞＜。

http://shtt.jp/

ということで。

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

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

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

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

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

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

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

が…。

携帯とPC、画面サイズも違えば操作方法も違う２つを
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個目になりました☆

• YUKI YAMAGUCHI Design Portfolio -ポートフォリオサイト-
• VIVID COLORS + BLOG -福岡で働くWebデザイナーのブログ-

• Web Site Color Picker -Webから自動でカラー抽出-
• Fireworksマニア -ファイアーワークスでのWebデザインTipsサイト-
• PHOTO STOCKER -高解像度フリー写真素材-
• シンプルパターン研究所 -パターン素材の配布-
• スタイルシート見出しメーカー -クリックするだけ-
• ビビッドカラーズ -0円のホームページ素材屋さん-
• 壁紙カレンダー -サイズ豊富なデスクトップ用壁紙-
• シャッター！ -twitterで写真や動画つきのつぶやきをカンタンに！←NEW

.

.

※はてブなどからきた方へ※

この記事は先日、『女性が落ちる”男のモテ部屋”』というどなたかが作ったまとめページに、”男の部屋の写真”としてなぜか”女の部屋の写真（私の部屋）”が引用されていた、ということを発端として書いたものです。
タイトルはそのことを皮肉ってつけたもので、本文の内容は『女の私の部屋づくりの記録』となっています。
まさかこんなにブクマがつくとは思わず…お騒がせしてごめんなさい…＞＜

今日は、畳部屋からモテ男部屋になった部屋の全貌を、隅々まで徹底解説！
畳→フローリング化から家具選びまですべてを紹介！

これが！モテ男部屋の全貌だ！！！！！！

…………。

はい、というわけでね。

ご存知の方も多いかと思いますが、私の部屋です。
畳部屋からのふり幅だけで勝負している私（女）の部屋です。すいません。

いやはや、今回なぜこんなネタ記事を書いているかというとですね…

NEVERまとめの「女性が落ちる”男のモテ部屋”」とうまとめに
どういうわけか私の部屋がまとめられていたからです！

いやいやいやいやwww

私の部屋、男の部屋だったらしいですよ…！知らなかった！

しかも男のモテ部屋って…

なんかもういろいろひどいw

ほら。

住んでるの女ですけど大丈夫ですか！！！！＞＜。

コメント

和室2部屋のふすまを外し、更に洋室に変身させた部屋。

もっと明りが少ないとよりムーディーになりますね。

ってこれ以上暗かったら生活しにくいわーーーー！！！！！！

とまぁ、つっこみはさておき、
おもしろいので皮肉ってネタとして以前書いた私の部屋の記事をまとめてみようとおもいます。

ちなみに大事なことなので先に書いておきますが、
もう３年ほど住んでいますが、部屋がどうこうぐらいで特段モテないですよ。残念ながら。

大事なのは部屋じゃない！

でもめげずに書いてみます！
生活しやすく、居心地の良い空間を目指した、私の部屋づくりの記録です。

和室からのスタート

以前に書いたことがあるのですでにご存知の方も多いかと思いますが、
私は激安賃貸築30年のマンションに住んでいます。

こんな感じの部屋を↓

こんな風にして住んでいます↓

アフターの部屋自体がたいしたことないのは目をつぶってください…。
私が大事にしているのはこの「ふり幅」です。

詳しくはこちらの記事をどうぞ

• 一人暮らしのインテリア紹介。和室１２畳からのスタート。

畳をフローリングに

床はウッドカーペット敷いてます。
買って自力で運ぶのはさすがに無理だったので通販しました。

これのブラウン（一番濃いヤツ）です。

フローリングカーペット敷いた話やつなぎめの対処法など、
ウッドカーペット導入に関しての色々はこちらの記事に詳しく書いています。

• 一人暮らしのインテリア(1)ウッドカーペットで床を畳→洋室風に。
• 一人暮らしのインテリア(2)つなぎ目をどうするか、それが問題だ。

カーペット選び

カーペットはスミノエのもの。これのベージュです。
以前の家では安いカーペットを買って敷いていたのですが、すぐにへたれてとても後悔したので、今回はいっぱい調べてこれにしました。3年目ですが、ぜんぜんへたれてません！フカフカ！

これも通販して届けてもらいました。

お手頃価格で買える（大事！！）素敵なインテリア選び

一人暮らしのお部屋づくりで大事なことは、如何に予算内で自分好みの家具を見つけるか、です！！！
運ぶのが大変なので通販したのがほとんどです。

予算内でデザインも気に入った家具にたどりつくのは大変でした…。

テレビボード

これをまっすぐにして置いています。
シンプルで使い勝手がいいです。伸縮するし、角置きもできるので引っ越しても使えそう。
友達の家もこれw

照明

メインの照明はこういうの

そのほかに間接照明が5つ。
間接照明と言ってもうち4つは990円のクリップライトですw
こういうの↓

一個は奮発しておしゃれなの買いました。
床に置いている照明はこれ。氷みたいでかわいいんです！

照明についてはこちらの記事に詳しくまとめています。

• 一人暮らしのインテリア(5)　安くておしゃれなライティングを考える。　間接照明をつけてみた。

テーブル

天板の下に収納があり、さらにサイドに見せる収納がついてます。
来客時に雑誌やリモコン、郵便物などをささっと隠せて便利なんですよー！

ソファ

無印良品のソファです。ソファは買い替えるの本当に大変なので（処分とか）、しっかりしたものを長く使いたい！！と、かなり真剣に選びました。

2年以上たちましたが、全然へたれてません。
カバーも洗えていい感じです。

ソファ | 無印良品ネットストア

時計

ガラスの掛け時計です。部屋の顔になるのでちょっと高かったけど気に入ったものを頑張って買いました！

うちのは多分これの旧バージョン。数字のところがもうちょっとシンプルです。
私のと同じヤツはもう売ってないんだよねー。。

シンプルでお気に入りです。

写真フレーム

時計のまわりに飾っている写真のフレームはダイソーで買いました。
ひとつ100円。

色が黒しかなかったので、ダイソーでブラウンのスプレーを買ってぷしゅーっと塗りました。

2L版の写真を入れています。

ちなみにテレビ画面に写っているのは映画デスノートのエンディングです。

ちょうど見ていたので、真っ暗よりかっこいいかな…と思ってエンドロールで一時停止してとりましたw

そんなことしたから男の部屋に間違われたのかしら…

2011年になりました！

旧年中は大変お世話になりました。

今年も精一杯頑張っていきたいと思います！
どうぞよろしくお願い致します♪