第24回リクリセミナー「一人の経営。会社の経営。」参加レポート

5/16(土)に、大阪で行われたリクリセミナー「一人の経営。会社の経営。」に参加してきました。
リクリセミナーは、去年10月の第20回リクリセミナー「Webディレクターの頭の中」でお話させていただいて以来、2回目の参加です。

今回は経営ということで、技術やマーケティングとは少し毛色の違う話題。ちょうど前職を退職し、これから独立等目指していくまさにその時でしたので、とてもタイミングが良かったです。今までサラリーマンだけをやってきたので、経営やお金の部分は全くの無知でした。また、色々な企業の内部事情を聞いていくなかで、経営部分で失敗はできないなぁと思っていました。そういった背景もあり、本当にまじめに、真剣に取り組んでいこうと考えている内容でした。


第31回 岡山WEBクリエイターズ「ECサイトの現実と対策」に参加してきました


2015年4月18日(土)に岡山で開催された、第31回 岡山WEBクリエイターズ「ECサイトの現実と対策」に参加してきました。

近くであまり開催されることのない話題だったのでとても楽しみだったのと、前職から抱えている悩みについて何か解決策がないかなぁと思っての参加です。
ECサイトの売上や集客をどうするかについてや、ECサイトを何で作るかなど興味深い話題が盛りだくさんでした。


レスポンシブと最適化のいいとこどりができる?a-blog cmsでできる、マルチデバイス対応


これは、a-blog cms Advent Calendar 2014の、8日目の記事です。

以前、Webridge Meeting SP17 で a-blog cmsのマルチデバイス対応についてお話しましたで書いた、a-blog cmsのマルチデバイス対応の色々についてスライドを公開しました。今回の記事は、その内容についてご紹介したいと思います。

a-blog cmsでできるマルチデバイス対応は3種類

a-blog cmsでは、以下の3通りのマルチデバイス対応ができます。

  • レスポンシブサイト
  • スマートフォン最適化サイト
  • ハイブリッド型サイト

それぞれ、a-blog cmsならではの機能を使って、便利に構築できるようになります。

レスポンシブサイトには専用のスタイルガイドが

a-blog cmsサイトで使えるグリッドやアイコン、見出しなどのスタイルガイドがあらかじめ定義されているので、レスポンシブサイトが比較的容易に制作できるようになっています。

また、スマートフォンでアクセスした際にはサイズの異なる画像を準備するなども可能です。

スマートフォン最適化サイトには、a-blog cmsのルールという機能を使用

スマートフォンとPCで異なるページを表示したい場合は、こちらの方法を使います。便利なのは、PC版、スマホ版で同一URLで運用できること。切り替えも自動でできるように設定できるので、とても簡単です。

ここで、レスポンシブサイトと最適化サイトについてのおさらい

レスポンシブサイトも、最適化サイトも、どちらもマルチデバイス対応で選択する方法ですが、どちらにもメリット、デメリットがあります。サイトを構築する際は、どちらの手法が適しているかを選定することも多いと思います。

  • レスポンシブサイトは1つのHTMLファイルで管理できるので運用が楽、ただしきちんと設計しないと構築が大変・・
  • 最適化サイトは、スマホ等に適した独自の表現ができる反面、メンテナンスが煩雑に・・?

そこで選択肢に入れたいのが、ハイブリッド型

できるなら、双方の長所を取り入れた、いいとこ取りの構築をしちゃいましょう!ということで、ハイブリッド型の方法についてご紹介します。

  • なるべく共通のファイルで管理したい
  • 同じページは同一URLで運用したい
  • 設計も構築もシンプルにしたい

ハイブリッド型なら、こういったことが実現できます。

ハイブリッド型で使うのは、a-blog cmsの継承機能

a-blog cmsには、テーマの継承機能があります。SASSなどを使われている方は感覚的には同じものだと思いますが、ベースとなるものを活かしつつ、上書きしたいファイルのみを作成することで、ベースの機能を継承したテーマが作られるというものです。 詳しくは、スライドをご覧ください。

ハイブリッド型でできる、表示の工夫

ハイブリッド型では、例えばベースはレスポンシブサイトとして作成して、ある一部分のパーツのみ、デバイスの種類に応じて出し分けるということができます。


PC版ではバナー画像、スマホ版ではテキストを表示

病院の診察表。PC版は横長、スマホ版は縦長で表示


ほかにも、

  • PC版は記事のサマリーを200文字、
スマホ版は100文字出す
  • お問い合わせへの導線エリアを
PCとスマホで出し分ける

など、それぞれのデバイスで望ましい表示ができるよう、制御できます。


案件に合わせて、最適な選択を

それぞれの長所を採用し、短所を補う、そういった設計が運用コストや制作コストを下げ、コンテンツ制作やマーケティングの方により注力できるのではないかと思います。 案件に合わせて、最適な選択をしていけたらいいですね。


Webridge Meeting SP17 で a-blog cmsのマルチデバイス対応についてお話しました

撮影:鍋坂樹伸(サン・スタジオ)http://sonsun33.com/

2014/8/2(土)に開催された、「Webridge Meeting SP17 いま知っておきたいWeb制作のトピックス」。Web Starter KitやWebフォント、HTML5をはじめ、今後の制作に活かせることが盛りだくさんでした。その中で、私もa-blog cmsを使ったマルチデバイス対応についてお話しました。


スマホ初心者の母にスマートフォンサイトのUIについて色々聞いてみました


おそらく自分の母親世代である方も対象になるであろうスマホサイトを制作するために、母に色々と意見を聞いてみました。

母は、スマートフォンで私のインストールしたアプリでレシピ見たり、天気予報を見たり、ニュースを見たりするぐらいで、積極的にネットで検索はしないけど、必要に迫られると見るというぐらい。

そこでいくつか驚いたこと、なるほどと思ったことがあったのでご紹介します。

右上の三本線はメニューとは認識しないどころか、「メニュー」という文言すら何を指しているのか分からない

最近、スマートフォンサイトではヘッダの右上に「三本線+メニュー」のボタンが配置されることが多くなっています。三本線だけ、というサイトもありますが、万人がターゲットのようなサイトは、「メニュー」「MENU」の記載が大体あります。

しかし、私の「このメニューっていうボタンを押したらメニューが表示されるって分かる?」という質問に返ってきた答えは、

「メニューって何のこと?」

でした。 母は、「メニュー」=「サイトの内容の一覧」という認識が無いみたいで、右上に「メニュー」と書かれたボタンがあっても分からないから押さない、とのことでした。

どんなラベル名だったら分かる?

では、どういうラベル名だったら分かるか?を聞いたところ、「目次」だったら分かりやすいと言っていました。 確かに「目次」だと意味合いも変わらず良いかもしれません。ただ、

  • 一般的には「メニュー」という言葉が浸透していること
  • 一旦「メニュー」=「サイトの内容の一覧」を認識できると後は問題ないということ

という理由で、単純に「目次」を採用するかどうかというところは要検討です。「メニュー(目次)」というのが分かりやすいのかな・・・。 最低限、右上のメニューボタンを使わなくてもサイトが巡回できるようにすることを考慮する必要がありそうです。

レスポンシブウェブデザインのサイトで、ナビゲーションが右上のボタンしかない、というのは、ターゲットによっては避けた方がいいかもしれません。

とりあえずスクロールしてみる

ページを開いて自分の欲しい情報を探す時は、ファーストビューに欲しい情報がなくてもとりあえずスクロールをしてみるそうです。逆に、何かをタップしたり、フリックしたり(キービジュアルやバナーのカルーセルなど)、タブを切り替えるなどはあまりしないとのことでした。

ページを下まで見終わった後、ページの先頭まで戻って他のコンテンツに移動するのは面倒くさい

これは自分もそうなのですが、ページを見終わった後に他のページに遷移する際、一旦トップページやページの先頭に戻ってメニューボタンを開き、遷移するということが面倒くさく感じることがあります。

ページを見終わった後、他のページに遷移しやすくする工夫も必要なようです。

まとめ

聞いてみて感じたことは、「ページを開いてから下までスクロールする」というのを主な動作としていて、ページを遷移したとしても、その繰り返しをすることが、ストレスなく閲覧できるということなのかなぁと考えました。

確かに、それだと動作がシンプルになり、スマートフォンの操作自体に迷うことは少なくなります。

これは母のひとつの意見に過ぎませんが、聞くことによって自分で考えてもみなかったことが発見できました。 今後のスマートフォンサイト制作のヒントになればと思います。


プロフィール

山田恵理子
  • Twitter
  • Facebook

デザイナー

山田恵理子

a-blog cmsエバンジェリスト/上級ウェブ解析士
香川県生まれ。プログラマーを経て2006年より高松のWeb制作会社にて県内の企業・ECサイトのデザイン、ディレクション、CMS構築等を担当後、2015年7月に独立。フリーランスと会社員の二足のわらじで新しい働き方に挑戦中。 香川県のWeb制作者のコミュニティ「Webridge Kagawa」のメンバーとしてCSS Nite in TAKAMATSUなどセミナーイベントを開催、スピーカーとしても活動を行う。
実家の桃農家も手伝う兼業農家。

エントリーリスト

タグ