話題・トレンド

Web Designing 2015年1月号に執筆させてもらいました。

18日発売のWeb Designing 5月号に執筆させていただきました。

「実践的Webトレンド分析2015」という海外の最新事例から2015年のトレンドを考察する特集で2ページほど担当させていただきました。

今回は「タッチデバイスと相性の良いナビゲーション表現」というテーマで今後主流になりそうなナビゲーションと実際に採用されている海外サイトを紹介しています。その他の方の記事もいろいろなテーマから2015年のトレンドが紐とかれていて興味深かったです。

興味のある方はぜひ購入して読んでみてください!

schoo(スクー)で授業配信します!

最近気になっていたサービスでもあった「schoo」で授業を配信させていただきます。

授業の内容は「もう炎上したくない!みんながハッピーになれるWebサイト制作の進め方」と銘打って、プロジェクトの中でよく起きるトラブルの具体例をあげてその原因と解決法を解説します。

授業は8月26日・9月2日の全2回で、第1回は制作会社向け、第2回はクライアント向けとしてそれぞれの立場から問題を取り上げていきます。

特にコミュニケーションに起因するものを中心に紹介しますので普段のプロジェクトの中でその辺りの悩みなどを抱えている方はぜひご覧ください。

詳細は公式サイトの告知ページで確認できます。

ちなみに今回の授業配信にあたっていろいろな授業を見てみましたが各界で有名な人の話やチュートリアル形式の技術解説など役に立つ情報が無料(※録画授業の無制限視聴は525円/月)で見れるのでWebサービスとしてもすごくおすすめです。

“ここが変だよ日本”が分かる動画「The Strange Country」

最近話題になっている動画ですが、ハッとさせられる内容だったので紹介したいと思います。

日本人の特長や生活をさまざまな統計データなどをもとに以下の8つの切り口から紹介したムービーです。

CHARACTER(特徴)・TOKYO(東京)・FOOD(食べ物)・TECHNOLOGY(科学技術)・WATER(水)・SUSHI(寿司)・LOVE(愛)・SUICIDE(自殺)

普段暮らしていると気が付きづらい視点でいろいろと考えさせられる点が多いです。

問題提起や警鐘ではなくユーモアも交えて「不思議な事実」として発信しているので逆に考えさせられるのかもしれませんね。

作品自体は田中健一さんというデザイナーが大学の卒業制作でつくったもので、実は4年前に公開されたもののようです。こういった過去の有益なコンテンツに出会えるのは近年のSNSなどの普及のおかげだと思います。

数百年したらこういったデータが発見されて歴史上の事実を知る事になるのかもしれませんね。

サイトリニューアルしました!

気づけば当ブログも丸4年。仕事の都合で止まっていた記事更新も再開したので久々にリニューアルしてみました。リニューアルのポイントと参考にした記事などをまとめてみました。

デザインについて

以前ガラッとデザインリニューアルした際にブログをやめてしまったのかという声も聞いたので今回は基本的なトンマナは以前のものを踏襲。読みやすさを重視して基本の文字サイズを大きくしました。

そういえば「トンマナ」って意外と意味を聞かれることが多いので念のため捕捉…

トンマナ(とんまな)は、トーン&マナーの略で、もともとは広告におけるデザインやコミュニケーションに一貫性を持たせること。要するに、全体の雰囲気に合わせましょうってこと。

ちなみにこちらが旧デザイン

変えなすぎもつまらないのでサイトロゴをプチリニューアル。

レスポンシブ対応について

以前はスマホからの閲覧はhtaccessを用いてスマホ用のページへ転送していましたが、タブレットでのレイアウトが調整できていなかったこともありレスポンシブを採用。

ブレイクポイントは1024pxと640pxの2か所で以下のようにレイアウトを切り替えてます。

ちなみに旧型ブラウザは非対応としました。あとで簡易的にCSSで整形しようかと思っています。

レスポンシブ時に意外と見落としがちな外部モジュールによるレイアウト崩れは以下で解決しました。

YouTubeなどはこちらで回避。

サイトの高速化

レスポンシブにしたこともあり、表示速度をあげるように最低限必要な画像のみCSSスプライトにし、極力WebフォントやCSSで完結させました。主な施策と参考記事は以下です。

Webフォント

WebフォントはGoogle Fontsを利用。日本語はどうしようかと悩んでのですが、ひとまずデバイスとしました。

CSS3の利用

装飾は基本的にCSS3で実現しました。面倒なグラデーションやシャドウの数値は以下を利用して取得。

アイコンもWebフォントで利用してみました。

CSSスプライトのRetina対応にちょっと手間取ったのですがこちらで解決。

ソーシャルメディア

これを気にソーシャルメディアも少し整理。

今まで利用していなかったGoogle+ページを作成。

最近はログインすらしていなかったmixiページは廃止しました。ちなみにソーシャルメディアはhoot suiteで管理を集約しています。

JavaScriptについて

今回は極力控えようと思っていたので必要最低限の利用にしました。アコーディオンやスクロールはあまり凝らずにjQueryを利用した軽めのもので実装。

どうしても入れたかったスマートホン版のスライド式のメニューはこちらのプラグインで実装しました。

こちらでかなり簡単にスライドメニューを実装できました。

制作の際に利用したプラグインや便利ツールなどはあとで詳しく紹介したいと思います。

リニューアルはできましたがちょうどこんなニュースも飛び込んできて、これからも記事の質をあげていきたいなと思いますのでこれからもご愛読よろしくお願いします。