UNDERGRUOND Official Website をリニューアルしました。今回は少しWebの話を Blog に書こうと思います。割とマニアックな話になりそうなので、興味のない方には退屈な話になってしまうかもしれませんが、どうぞお付き合いください。

私の一番の強みは写真でも動画でもなく、Web。ここ最近仕事でWebsiteについて真剣に考え、一から製作する案件がいくつかありました。そういった体験から私なりに考えたWebsite の今について少し語ろうと思います。

UNDERGROUND はご存知の方も多いと思いますが、Wordpress といオープンソースのブログソフトウェアを使用して構築しています。有名所だとアメブロなんかと同じような仕様ですが、もう少し色々と自分好みに編集できる所が大きな魅力です。概観はテーマという物が存在して、自分の好きなテーマをダウンロードして、使用することで、Hi Quality な Blog Siteを簡単に開設する事ができます。

前回テーマを変えたのが、確か２，３年前。その当時最もお洒落だったフルスクリーンレイアウトの TOPページとスラッシュ型に Blog のパーツが並ぶ今までにないスタイルの Website でした。ただお洒落な反面カスタマイズが難しく、自分の望むスタイルにならないのが気に入らなくて、色々考えて、今回のスタイルに変更しました。

Facebook, Twitter, Instagram を代表とする SNS が流行っている事で、一時期流行った Bloger たちの多くは簡単に投稿できるそちらに流れてしました。UNDERGROUD が Facebook ページを開設しないのは、あくまで Website をメインとしてりたかったのです。ただ、新着情報をリアルタイムにお伝えする為に Twitter を利用し、販売、その他多数の方を誘導するために Instagram をやり、最後の終着点は必ず Website が理想なんです。

なぜそこまで管理も更新も大変な Website にこだわるか？というと、SNSでは決められたフォーマットに沿った見せ方しか出来ないのが、嫌だったからです。写真も動画もWebも全てをひっくるめて表現したいんです。

そこは自分の Website を立ち上げてからずっとぶれないところではありましたが、昨今のスマートフォンの爆発的な復旧により、Website の概念がかなり変わってきました。スマホで Webブラウジングする時間が昔とは比較にならないくらい増えてきました。この現象は特に ECサイト (ネット通販) なんかで顕著に見られます。

PCサイトで作ったものがスマホで見るとどうなるかというのは、皆さん気にした事がありますか？そう同じように見えるサイトが大半だと思います。は？と思うかもしれませんが、そのサイトが見やすいか見にくいかと聞かれたら、間違いなく後者だと思います。PCサイトをスマホで見ると情報量が多すぎ、かつユーザビリティー (操作、文字の大きさ等) がすごく悪いと感じました。２、３年前はPCサイトをスマートフォンでも同じように見せるレスポンシブデザインが主流で、私のテーマもそちらを意識していましたが、やはり見にくかったと思います。

じゃぁどうしたらいいの？って話になると思います。私の出した結論は２パターンです。
まず自分が製作したい Website が静的（更新頻度があまりない企業Website）にするか動的 (常に更新があるサイト (例)Blog など)にするかを決めましょう。

まずは静的サイト
ECサイトは割りと静的なサイトが多いと思いますが、新着アイテムや、再入荷など、自動的に Website にフィードバックさせる有料プランはいくらでもあるので、それを利用しつつ Website をPC版とスマホ版で２種類をフルスクラッチで製作し、デバイスを判定して、振り分けたほうが、より伝わる Website を構築できるでしょう。

スライダーや、カルーセルスライダー、モーダルウィンドウなどは、100%レイアウトで製作しておけば、組み合わせの変更で、PC、スマホどちらのサイトにも同じように使用できます。更新時もまるごとコピーして張り付ければ、特に更新も手間取らないはずです。

スマホサイトは特にユーザビリティを考えてワンカラムで構築したほうがいいです。タップできるボタンの間隔、大きさなど、よく考えて作りましょう。さらにスマホサイトで見やすいフォントにすると割と大きなpointになるので、どこまでが必要な情報かをしっかり整理しておいたほうがいいと思います。どうしても長い文章が書きたい場合は、モーダルウィンドウをうまく使えば、ページを縦長に伸ばさずすっきりとしたレイアウトで見せることが出来ます。どうしてもカラムを増やしてメニューが欲しい場合は、ハンバーガーメニューをTOPに固定 or TOPに配置し、タップすると展開できるようなサイトにしたほうがユーザーには優しいです。

PCサイトは逆に２カラムや３カラムで構築し、多くの情報を持たせたほうがより効果的だと思いますが、PC→スマホ、スマホ → PC と行き来する場合があるので、必ずPC版の表示をスマートフォンで確認しどの端末で見ても見やすいサイトにしたほうがいいと思います。特にスライダー系は iPhone での表示が崩れる場合があるので、要注意です。どちらにせよ HTML5 と CSS3 を理解しながら構築しなければいけないので、普段 HTML しか扱わない人にはかなりレベルが高い作業ですが、これをやるとやらないとでは売り上げ、企業の宣伝などで今後遅れをとるでしょう。PCサイトの流行はワンカラムももちろん分かってますが、あるひとつの商材や、一度作ったらそれ以上のカスタマイズが必要のない Website であれば、いいと思います。ただ乗せる情報が圧倒的に少ない事と、サイトの作りにユーザーがまだ慣れてないので、迷子になりやすいかなと私は思いました。

次に動的サイト
Blog をWebsite に組み込みたい場合は、Wordopress や Blogger などのオープンソースを利用したほうがいいです。フルスクラッチで構築もできますが、一覧表示を製作したりする際、更新の手間が増え実用的ではないからです。注意点としては必ずレスポンシブデザインに出来るかどうかを導入前に確認しましょう。UNDERGROUND の New Website は今回スマホ専用のCSSを組み込んでいるので、スマホでかなり見やすくなっていると思います。ただ簡易的に見やすくなっただけではなく、しっかりデザインも出来ている思います。

今回新たにリニューアルするのに当たって私が絶対にはずしたくなかったのが３つあります。
まずはフル画面での写真表示、Blog ページの幅を広くセンターに配置する事、そしてスマホ独自のCSSを適用できることでした。

特にレスポンシブに対応ではなく、スマホ用の CSS を適用できる事で、スマホサイトと、PCサイトを別で管理する必要がないので、PC版を更新したらそのままスマホ版にも更新できるのが大きなメリットです。じゃぁ静的な Website もそうしたらと言われそうですが、静的な Website は同じパーツを使ってもレイアウトがPC版と全く作りが違う作りになるので、それぞれのデバイスにあわせて構築したほうがユーザーには優しいんです。

長々と書いてしまいましたが、Website のテクノロジーは日進月歩で日々進化しているので、少し足踏みしているとすぐに遅れをとってしまいます。今回私が書いたこの記事もプロから見ればそんな事は常識だよとご指摘いただくかもしれませんが、私が Website をこうやって考えて作っているというのが伝わり、今後のサイト作りのなにかの参考になって頂ければ幸いです。