MENU

by • July 23, 2015 • Creative, Fashion5776

縦長!動く!スマホ最適化されたレイアウトのファッションWEBコンテンツ紹介

「スマホの流入が9割なので、スマホ優先でサイト制作お願いします」

そういったお話をいただくことも珍しくなくなってきました。

スマホの画面はPC画面と比べて一度に見える情報が少なく、横長が縦長になり、マウスクリックがタッチになるなど、根本的に違います。
そのため、PCとはまた別の視点でレイアウトを考えなければ、スマホの良さを殺すデザインになりかねません。

逆に、スマホならではの操作性を生かしたレイアウトというのも存在します。
CMでもおなじみマンガアプリのcomicoは「縦読みマンガ」という手法を取り入れました。
本をリプレイスしたWEBコンテンツといえば、擬似的にめくる動作(=左右の遷移)を使いがちですが、縦長比率のスマホ画面では、マンガ特有の見開き表現ができなくなります。
それを縦長にすることで、ページサイズという縛りがなくなり、大胆なコマ割りが可能になったというわけ。



comico このように、上下見切れるくらいインパクトのある絵での表現が可能に
(引用元:comico 咲くは江戸にもその素質


ユーザーにとっても、何度も指を動かして左右にスワイプするよりも、縦スクロールの方が
「パラパラめくる」体験と近い感覚が得られるのではないでしょうか。
もともと紙で作られたデータならともかく、スマホファーストで作るなら、縦長レイアウトの方が適していると言えるのかも。

上記はマンガの例でしたが、同じような考え方で、「スマホ版ファッション誌」を体現したWEBコンテンツが増えつつあります。
縦長レイアウト、動く画像、インタラクティブ性。
今回はスマホに最適化されたWEBマガジンコンテンツをいくつかご紹介。

s’eee digital

iPhone app

seee
seee

鈴木えみちゃん編集のマガジンがアプリ化。
写真のクオリティはもちろんのこと、動きがリッチ!
全ページインタラクティブで、なんと50ページ近いボリュームがあります。
読み応えあり。ぜったい有料版を買うべき。

どことなくHEAPSと構成が似ていると思ったら、制作チームが同じらしい。


ELLE online “Let’s have a PATY!!”

Web site
elle
elle

ファッション誌ELLEの、2014年のクリスマスコンテンツです。
制作はsimone。さすがのクオリティ!
gifアニメやjsを効果的に使い、常に動きのあるページデザインになっています。
モデルさんのキュートなポージングがgifで表現されているのはかわいいかもー!

1_chojo__effect3 スマホを顔に当てて使える動くフォトプロップとか、ELLEらしいおしゃれコンテンツですね。


SIGN

Web site / iPhone app
sign
sign

女子に絶大な人気を誇るアパレルメーカー、MARK STYLERより分社化したTimes Transit社運営のキュレーションメディアです。
キュレーションコンテンツの他に、モデルを起用した特集記事が見どころ。
デザインとしては、一般的なキュレーションメディアとファッション誌の中間のような構成で、写真の扱いが他のメディアより大きいです。
読むというよりは眺める感じ。





ところで、8月に開催される「THE FASHION HACK TOKYO」というハッカソンイベントに応募してみました。
出版社合同主催ですって。豪華ですね。

siteimage
THE FASHION HACK TOKYO

スマホ時代の雑誌コンテンツってどんな形だろー?と考えていて、とりあえずこのブログを書くにいたりました。
単なる紙のリプレイスじゃなく、新しい価値が生まれたほうがおもしろいよね。


ファッション誌については、過去にはこんな記事も書いたことがありました。
今読み返すと、ちょっとまた考え方変わってきたかも。
ネット・SNSの普及がファッション誌に与えた影響


ハッカソンイベント、どんなアイディアが集まるのかなーって #TFHJP を見ながらニヤニヤしてます。
ちなみにあさとは、デザイナー枠で応募しました。抽選通るのかな。
このブログで紹介したようなコンテンツが作りたい人は応募してみては。



※ヘッダー画像はこちらからお借りしました

girlydrop-250x250




★ asato ★

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

Related Posts