モバイルファーストの実例として、clubringoのデザインを作ってみる。

とりあえず、フリー画像から林檎を探し、photoshopで加工した画像を作ってみました。

自宅で再作成してみたのが次の画像。

この画像をサイトのアイキャッチにして、作成してみます。続きは後日。

audioタグについての解説

html5は、Flashやjavascriptなしでも「音声メディア」を貼り込めます。それがaudioタグ。詳しくは以下等を読みましょう。
audio 要素 – 組込コンテンツ – HTML要素 – HTML5 タグリファレンス – HTML5.JP
<audio>－HTML5タグリファレンス
audio 要素をサポートしないブラウザで表示する内容をaudioの中に書きます。audio 要素をサポートしているブラウザでは表示されません。
audio 要素にcontrols 属性を書いておくと、ブラウザが再生／停止／音量などのコントロールを表示してくれます。

フォールバックについて

（＊fallback=代替の、予備の）何らかの要素がダメだった時用のしかけを用意しておく手法のこと。例えば、

• audio 要素をサポートしていないブラウザ向けに、子要素にmySpaceへのリンクを貼る
• cssのrgbaをサポートしていないブラウザ向けに、rgb指定を先に書いておく。参考

など。
ところで、「フォールバック」は開発手法ですが、制作コンセプトとしては以下の物があります。説明する側も時々、混同していたかもしれないので、改めて整理しておきます。

クロスブラウザ

どんな環境でも同じUXを提供する制作姿勢のこと。1pxのズレも許さないゾ！というヤツ。

Progressive Enhancement

まずは最低ラインのUX（文章や画像などの情報、ちゃんとクリックして移動できるリンクなど）を提供し、その上で新しい機能をのせる制作姿勢のこと。

Graceful Degradation

新しい環境でのUXを基準にして制作し、古い環境ではレベルを落としたUXを提供する制作姿勢のこと。

Polyfill

古い環境でのUXを、新しい環境のそれに近づける為に、javascriptなどを駆使して頑張る制作姿勢のこと。

詳しくは図解付きでまとめられているので、HTML5&CSS3入門 第6回 Graceful DegradationとPolyfill を見て下さい。

clubringoのコンテンツについて

サイボウズLiveにある過去の資産を、順次、WordPressに移しましょう。
「サイボウズLiveの書き込みをWordPressに移す」

WordPressのカテゴリーとタグの使い分けについて

カテゴリー

親子関係を指定できるので、カテゴリー自体が階層になる。階層を辿ってコンテンツを絞り込むことが可能になる。

タグ

親子関係を指定しなくて良いので、そこに悩まず簡単に付けられる。投稿内の重要なキーワードを指定する感じでOK。

コンテンツ移植の他に分担して行う必要ある事

• 固定ページの策定と作成（clubringoとは？とか）
• テーマの作成