News


こんにちは。お久しぶりです。Proideスタッフの村上です。

「Proideで働く」シリーズの最終回、「Proideで体感!Web制作の最前線」を公開します。ここ最近のWeb制作業界のトレンドを、Proideで実際に行った業務とからめながらざっくりと紹介していきます! Web業界は進化のスピードが半端なく早い業界です。この記事で紹介するトレンドを追っかけて2015年を乗り越えていきましょう(^^

それでは早速始めます!!

レスポンシブWebデザイン

これはもう数年前から知られている表現ですが、2014年は特にこの「レスポンシブWebデザイン」が普及した年でした。どのサイトを見てもレスポンシブ、みたいな状況でしたね。Proideでも業務でいくつかレスポンシブに対応させたコーディングを行いました。

レスポンシブWebデザインとは、ブラウザの横幅やスマホやタブレットの横幅に応じてデザインを切り替える手法のことを言います。スタイルシートというデザインを記述するファイルがあるのですが、その中で

「横幅が1000ピクセル以上はAというデザイン」
「横幅が999ピクセル以下で640ピクセル以上のときはBというデザイン」
「横幅が639ピクセル以下で320ピクセル以上のときはCというデザイン」

という風に画面のサイズによって使用するデザインを切り替えることで実現します。Proideの仕事でいうと「なら語り 大人の名刺」のサイトがレスポンシブWebデザインで構築されています。大人の名刺のホームページを表示させて、ブラウザの横幅を広げたり縮めたりすると、コンテンツがいい感じに再配置されたり画像が小さくなったり大きくなったりすると思います。これがレスポンシブWebデザインです。

レスポンシブWebデザインの利点として、レスポンシブ対応のページを1つ作るだけで、PC、タブレット、スマホと横幅の異なるデバイスにマルチで対応することができることがあげられます。ただこれはメリットでもあり、実はデメリットでもあります。というのは、レスポンシブWebデザインで1つのページを複数のデバイスで対応させるということは、ページ内で使用されている画像ファイルも同じものを使うことになります。PCは画面が大きいし回線も速いので1000ピクセルくらいの画像を表示させることにあまり問題はありませんが、レスポンシブWebデザインのページだと、スマホで見ているときにも同じ1000ピクセルの大きな画像をダウンロードして表示させるようになってしまいます。

そういった状況をJavaScriptやPHPをつかって異なるファイルを読み込むように制御することも可能なのですが、「それだったら最初からPCとタブレットとスマホで別のページを作ればええやん」って事になってしまいます。ここらへんがレスポンシブWebデザインの設計の難しい点ですね。Web制作者の間では「レスポンシブWebデザインは銀の弾丸ではない」というのが通説となっています。状況に合わせて使用する技術の選択が必要な顕著な例だと思います。

高級ペライチ

ホームページの中で1つのページだけで構成されているものを業界用語で「ペライチ」といいます。その中でもページ内の移動やマウスカーソルの位置などによって、何だかすごい動きを表現しているサイトのことを「高級ペライチ」と言います。

技術的にはページ内をスクロールしたピクセル数やマウスカーソルの座標をJavaScriptで数値として取得して、その数値をページ内のアニメーションのプログラミングで使用する数値として変換して使うことで表現しています。これはもう言葉で説明するより、見てもらったほうがいいでしょう!! いくつか有名なものを紹介します。

img_skytree 東京スカイツリー

http://www.tokyo-skytree.jp/

ページ内下方向にスクロールすることで、スカイツリー全体像が表示されるようになり、その他オブジェクトが表示されたり移動したりします。

img_sumikiri キリン 澄みきり

http://www.sumikiri.jp/

マウスホイールのスクロールでアニメーションするのですが、スクロールをまったく意識させない構造になっています。

img_rinko Rinko Kikuchi

http://www.rinkokikuchi.com/

マウスホイールを動かすと、横にスクロールするちょっと意外な動きをします。

高級ペライチのサイトは「パララックス(視差効果)」というテクニックと一緒に使われることが多いですね。パララックスとはマウスのスクロールなどの移動にあわせて、移動速度の異なる背景画像を配置することによって、画面に奥行きを感じさせることができる表現のことを言います。2015年もこういったサイトがさらに増えていくと思われます。

ただこういった動きの派手なサイトは、ユーザーに対するアクセシビリティを損なうリスクもはらんでいます。技術や芸術的には面白い表現ですが、情報量の多いサイトでこういった動きの派手なサイトにしてしまうと、逆効果になる場合もありますね。これも目的と手段をはっきりさせて使う必要のある技術だと思います。

ロングシャドウ

少し前に「フラットデザイン」というのが流行りました。iOS7やWindows8でも取り入れられた事は皆さんもご存知だと思います。ただこのフラットデザイン、あまりにもいろんなところで普及したため、あっというまに飽きられてしまいました。そこで、「ありきたりなフラットデザインを何かいい感じにできないかな?」と、そういう状況で登場したのが、「ロングシャドウ」です。

画像で見てみるとわかりますが↓みたいな感じです。

img_longshadow

他には
早くもIT業界を賑わせたフラットデザインが進化!ロングシャドウが新鮮!

というまとめサイトもあるので興味のある方は見てみるといいでしょう。

ロングシャドウはCSSやJavaScriptでは再現が難しい点と、日本語との相性がいまいちだったため、テキストよりもアプリのアイコンとかボタンとかで使われているケースが多いですね。

ゴーストボタン

これも国内よりも海外で普及したデザイン表現の一つです。普通のボタンなんだけど、境界線だけ引いてあって、背景が透けてバックグラウンドのテクスチャや写真が透けて見えるボタンのことをゴーストボタンといいます。

img_ghostbutton
http://getbootstrap.com/

img_ghostbutton02
https://www.drwallet.jp/

Webページ上のボタンというのは、本来他のコンテンツとは差別化されたデザインが主流でした。いわゆるボタンらしさがある状態ですね。しかし、ここ最近普及したゴーストボタンはWebページが本来もっているイメージを損なうことのないデザインを取り入れたものです。最近ではWebページの背景にサイズの大きな画像を配置したデザインも普及してきてますが、そういった表現ともマッチしており、ゴーストボタンはこれからもどんどん普及していくと思います。

タスクランナーgulpの台頭

これまでデザインの分野でのトレンドを追っかけてきましたが、残り2つはコーディングのトレンドを紹介します。まず1つ目はタスクランナー「gulp」の紹介です。タスクランナーって何? って話ですが、一言で言ってしまうと、コーディング作業で発生する作業の中でも自動でできる部分を自動でやらせるプログラムの事です。コーディングで発生する自動化できる作業とは、ファイルの圧縮とか中身の整理とかコンパイルとか、その他もろもろです。

さらっと説明すると、まず自分のパソコンにnode.jsというアプリケーションをインストールして、node.jsのモジュールとしてgulpをインストールし、設定ファイルを書いて、黒い画面(cmd.exe)でコマンドをたたいて実行させます。

プログラミングの経験にある方だとイメージしやすいと思うのですが、プログラミング言語のソースコードって一度編集したら、コンパイルが必要なケースがありますが、gulpを使うとファイルの変更をバックグラウンドで検出して、自動でコンパイルまでやってくれます。

gulpが登場する前まで、gruntっていう同じようなタスクランナーがあったのですが、gruntは設定ファイルの記述が冗長だったり処理が遅かったりで導入しませんでした。gulpの存在を知ったのは去年の事だったのですが、「どうせgruntと一緒でしょ~」と思って使ってませんでした。たまたまドットインストールでgulpの動画が公開されたのを知って、ちょっと見てみたら「これええやん!!」となって一気にgulpにころんだ次第です。

これ以上のgulpの説明は省略しますが、興味が持てたら導入してみるといいでしょう。

img_gulp

gitによるバージョン管理

2015年のWeb業界ではホームページのアプリ化がどんどん進んでいくと思っています。より複雑な動作、より高級なデザインなどが取り入れられて、制作における工程が多くなり、開発規模も複数人共同で行っていくようになるのではないかと考えています。

その中で特にコーディング作業を複数人で行う時にソースコードの共有と管理の方法が重要な課題となるケースがあります。その問題を解決する1つの方法がバージョン管理システムの導入です。

バージョン管理システムというとプログラマとかSEの方が馴染み深いと思いますが、今後はどんどんWebデザイナーやコーダーの間にも普及していくと考えています。実際にバージョン管理システムを導入しているWeb制作会社も数多く存在します。そのバージョン管理システムのなかで今一番普及しているのが「git」というものです。

Proideでは部署として導入していないのですが、私は個人的には業務でも取り入れていました。どのサイトで使っていたのかというと、実はぷろぼのの公式サイトのWordPressのテンプレートファイルの管理で導入していました。

本来バージョン管理システムというのはコマンドを叩いて動作させるものなのですが、最近ではいい感じのGUIアプリがあるので私はそれで管理していました。ぷろぼの公式サイトを管理状況をちょっと見せちゃいます。

img_probonogit

SourceTreeというソフトで管理しています。まさにこれが、ぷろぼの公式サイトの舞台裏ってところですね(笑

今回私は一人だけで使用していたバージョン管理システムですが、複数人で使用することでさらにその威力を発揮します。ファイルの変更履歴をコメントを付けて保存できたり、同じファイルを複数の人が別々に変更したときに、それぞれの変更箇所を結合してファイルに反映してくれたり、特定のファイルを別のバージョンとして分岐させて開発を進めていけたりします。さらにgitをホスティングしているサービス「github」というのがあるのですが、そこではちょっとしたコミュニケーションツールなども使えるようになります。

gitに関しては私自身がまだまだ初心者なので、これから覚えないといけないことも多いのですが、本格的に使い方をマスターできたらProideでも導入していきたいと考えています。

さて、これで「Proideで体感!Web制作の最前線」の記事は以上です。

「Proideで働くシリーズ」を書こうと思いついたのはお正月休みの時だったのですが、なんとか完結させることができて自分自身ホッとしています(笑 Proideの仕事はこれからもまだまだ続くし、これからもいろいろな事を勉強して業務を遂行していくことになると思います。ブログの記事を連載物にするとリピーターが付いてくるというのがわかったので、また機会があったら、今度は別の形で連載物をやってみたいなと考え中です。これからもProideブログを要チェックですよ!! 今後ともよろしくお願いします!!

★Proideで働くシリーズ
【Proideで働く その1】Proideの紹介
【Proideで働く その2】 独学で極める!Web制作の勉強術
【Proideで働く その3】 Proideで体感!Web制作の最前線

このエントリーをはてなブックマークに追加