タグ: homepage

はじめまして、今年入社したての岩間です。
雨にも負けず風にも負けず、風邪には全敗しつつ仕事に励んでいます！
入社して半年・・・私は1からJavaScriptの勉強を始めました。
今回から全3回に分けて、実際に仕事としてプログラムを書く上で困ったことと、私が行った解決方法を紹介していきます！

スマホ対応で困ったこと

その1　ページ全体が縮小されてしまう

文字サイズやスマホ用に作った画像が縮小され、構成する際、大幅に拡大しなければなりませんでした。
画面サイズとコンテンツサイズをそれぞれ確認してみると、幅320pxの画面に、幅980pxのコンテンツが表示されています・・・。

その980pxってどこからきたの！？

調べてみると、スマホ表示にはViewport（ビューポート）の設定が重要だったようです！
Viewportとは表示領域のことで、何も指定しないとデフォルト値の980pxになり、小さくなってしまったというわけです。
これで内容が縮小されてしまう原因がわかりました！

その2　タブレットの表示領域がPC表示に合わない

スマホ用にViewportを設定したはいいものの、iPadなどのタブレットでPC表示をするとき、一部のコンテンツが画面からはみ出して無駄な余白ができていました。

はみ出た分だけ横にスクロールできるようになってしまって、不恰好です・・・。

原因はコンテンツごとに幅の指定方法が違ったからのようです！
画面に合わせたいコンテンツ（ヘッダー等）は幅100％の指定をしているので、Viewportの範囲内で幅いっぱいになります。しかし、大きさを固定しているコンテンツは画面サイズで横幅が変わらないため、画面内に納まらずにViewportからはみ出て、余白ができてしまいました。

その3　環境によって画像一覧の見え方を変えたい

リストの高さがバラバラで、回り込んだリストがズレてしまっていたのを、AutoHeightを使って整えていました。AutoHeightは揃えたい要素の全体を一番高いものに合わせる方法と、指定した数ずつ揃える方法（2つなら2つのうち高いほうに揃う）があります。
今回は、PC表示では3つずつ、スマホ表示では2つずつ高さが揃うようにしました。

でも、大きい画面のスマホを横にしたとき、2つずつでは画像が大きくて見辛くなります。
逆に、画面の小さいスマホは縦でも横でも2つずつでないと画像や文字が小くて見辛くなってしまいます。

私は、2つはスマホ表示、3つはPC表示という固定概念に囚われてかなり悩みました。

nexus7はPC表示にしたいけど、nexus7の幅で切り替えると変えなくてもいい機器までPC表示になってしまう・・・。一体どうすれば・・・。

ここで上司から救いの一言
「難しく考えすぎ。大きいスマホは、スマホ表示でリストを3列にすればいい。」

なるほど・・・！！

これで全部の解決策が出てきました。
そして、悩んで悩んで沢山調べて沢山試したおかげでjQueryをどういう風に書けばいいかわかるようになっていました（感涙）。

さて、具体的な解決方法については、次回からjQueryの記述と併せて解説していきます！

第2回：なるべく沢山のスマホ・タブレットで、快適に見られるレイアウトの実現（第２回/全３回）
第3回：なるべく沢山のスマホ・タブレットで、快適に見られるレイアウトの実現（第３回/全３回）

当ホームページのリンクボタンはカーソルを乗せると、ボンヤリと背景色が変わります。え？微妙すぎてわからないですか？そうです、その微妙な変化に意味があるんです。
※対応ブラウザ：Chrome、Safari、Firefox

微妙な変化＝自然な感覚

注意していないとわからないような微妙な変化、これがユーザーの「感覚」に大きな影響を与えます。次のサンプルにマウスカーソルを合わせて比べてみてください。

リンク1リンク2リンク3

これは今までの一般的なリンクボタンで、カクカクとして無機質な印象をうけます。

リンク4リンク5リンク6

反対にこちらのリンクボタンは、どことなく自然な感じを覚えませんか？これは背景色が?ボンヤリ変わるアニメーションを使用しているためです。

「自然さ」「リッチ感」の演出

こういった微妙な変化は、感覚的に「自然さ」や「リッチ感」といった印象を与えます。

デジタルの世界では、ほぼ0秒でボタンの色を変えることが可能ですが、現実の世界ではありえません。時間をかけて変化することが私たちの感覚では「自然」なのです。この手法はiPhoneのインターフェイスで有名です。例えばiPhoneのスクロールの操作は、画面に表示されたページを実際に触れているような感覚を再現しています。

また、すぐ点灯する蛍光灯よりも、少し時間のかかる白熱灯のほうが高級感を演出できるように、時間にゆとりをもたせることでリッチなイメージや安心感を与えることもできます。

CSS3の機能「CSS Transitions」でより簡単に

今まではアニメーション用のプログラムを組むことで再現していた機能ですが、ウェブサイトのカラーやレイアウトを定義する言語のひとつ「CSS3」の登場で格段に簡易性と自由度が上がりました。今後のデザインの演出として使用してみてはいかがでしょうか。

[contact]

ここ最近、背景やメインイメージに動画を使用したウェブサイトが増えてきています。当ホームページのトップページでも、メインイメージの背景に動画を使用しています。

HTML5の登場で動画挿入が簡単に

この傾向の最大の要因は「HTML5」の存在にあります。HTML5とは、ウェブサイトを構築する基本的な言語である「HTML」の最新バージョンで、表現力を向上させる新しい機能を想定して作られていることが特長です。
これまでウェブサイトに動画を挿入するには、複雑なスクリプト(プログラムの一種)を記述する必要がありましたが、HTML5の機能を活用することで、大幅に簡略化できるようになりました。

動画をデザイン要素のひとつとして

動画を背景に使用することも簡単になったため、例えば製品写真の背景に動画を使用したり、当ホームページのように上に重ねたコンテンツをスライドショーにする、といったこともできるようになりました。
また、あらかじめ動画にキャッチコピーなどのエレメントを組み込んでおくと、動画の画質が低い場合ボケて視認性が落ちてしまいますが、動画とエレメントを別々にしておくことで、画質に左右されることなく表示することができます。

注意点としては、ユーザーがHTML5の動画機能に対応していない古いタイプのブラウザを使用している場合と、表示が変わってしまう一部スマートフォンへの対策です。この場合動画ではなく、代替えの静止画を用意しておく必要があります。

エクサホームページで使った、最新のウェブデザインテクをご紹介

今月始めにエクサホームページをリニューアルしました。今回はこの新ホームページで使用している、最新のウェブデザインテクニックについてご紹介します。言われなければ気づかないような“さりげない”テクニックもあるので、ホームページ担当者のためにも、この記事を読んだらゼヒともじっくり見てあげてください…！

1、ガツンと目を引くムービースライドショー

トップのサービス紹介をスライドショーにしました。背景には“さりげなく”動画を使用しています。実はこれ、今までのウェブデザインではとっても手間のかかる技術なんです。

さりげなく、それでいて目をひく背景動画

2、ボンヤリ背景色の変わるリンクボタン

ボタンになっているリンクにマウスカーソルを持っていくとボンヤリとボタンの背景色がかわります。微妙すぎてボンヤリなのかわからないという人のために、後日くわしく解説いたします！

3、いつからそこに？！突然あらわれる「TOPへ」戻るボタン

いまどきのホームページなら必ずある、ページの「TOPへ」戻るボタン。でもこのホームページには見あたりません。…でも気がつくといつのまにか画面右下に！

使っている技術はまだまだありますが、今回はトップページで注目してほしいポイントをご紹介しました。

後日あらためて当ブログにて「実際どんな技術」で「どんな目的があるのか」といった詳しい話をさせていただきます。お楽しみに！