スマートフォン
利用時の
従来の問題点

　これまで当美術館はパソコンでご覧くださっている方々の利便性を重視した画面設計になっていたため、スマートフォンでご覧いただくと幾つかの問題点がありました。
　現在それらの問題点を解決すべく、大改修を行っておりますので、中間報告としてその概要と進捗状況をお伝えします。

　まず、これまであったスマートフォン使用時の問題点を挙げると以下のようになります。

(1)

従来通り横に並んだ３つの欄の内容を同時に画面に表示すると文字が小さくなり過ぎ読めませんでした。
　そこで、真ん中の欄のみを表示する画面と左右の欄を表示する画面を分けることにしました。
（ピンチアウトすれば同じことはできましたが、調整が大変でした。）

(2)

スマートフォンでは画像を画面の横幅いっぱいに表示し、それ以上小さく表示（ピンチイン）できないため、画面を縦長に使うと画像が小さくなり過ぎ、横長に使うと大きくなり過ぎて画像の上下が切れてしまっていました。
　そこで、画像の下にダミーの横に長い画像を表示し、画面を横長に使っても画像の上下が切れないようにすることにしました。

(3)

静止画およびスライドショーの拡大画像はパソコンで見る場合の解像度を前提にかなりの高解像度になっているため、スマートフォンで見る場合には不必要に大容量のファイルをダウンロードする必要がありました。
　そこで、スマートフォン用のページにあるリンクで開かれる拡大スライドショー画像は中解像度とし、データ量を減らすことにしました。
　ただし、静止画に関してはあまりに画像の数が多いことやスクロールして細部をご覧いただくことを想定して、従来通りの高解像度のままにすることにしました。


　問題点を解消するための対策と進捗状況に関しては右の「スマートフォン用の改修」をご覧ください。

スマートフォン用の改修

　これまで当美術館はパソコンでご覧くださっている方々の利便性を重視した画面設計になっていたため、スマートフォンでご覧いただくと幾つかの問題点がありました。
　現在それらの問題点を解決すべく、大改修を行っておりますので、中間報告としてその概要と進捗状況をお伝えします。

問題点(1)
問題点(2)
問題点(3)
　従来通り横に並んだ３つの欄の内容を同時に画面に表示すると文字が小さくなり過ぎ読めませんでした。 　スマートフォンでは画像を画面の横幅いっぱいに表示し、それ以上小さく表示（ピンチイン）できないため、画面を縦長に使うと画像が小さくなり過ぎ、横長に使うと大きくなり過ぎて画像の上下が切れてしまっていました。 　静止画およびスライドショーの拡大画像はパソコンで見る場合の解像度を前提にかなりの高解像度になっているため、スマートフォンで見る場合には不必要に大容量のファイルをダウンロードする必要がありました。
問題点(1)

　従来通り横に並んだ３つの欄の内容を同時に画面に表示すると文字が小さくなり過ぎ読めませんでした。
対策
 　そこで、真ん中の欄のみを表示する画面と左右の欄を表示する画面を分けることにしました。
（ピンチアウトすれば同じことはできましたが、調整が大変でした。）

　実際にパソコン用の画面と今回スマートフォン用に作成した画面を比較すると以下の通りです。スマートフォン用の画面に切り替えるためのスイッチはパソコン用画面の左欄上端のスマートフォンのマークです。


パソコン用画面		 ⇒

スマートフォン用画面　Ｉ



スマートフォン用画面　ＩＩ
　上記対策を施した作品の一覧はオリジナル作品カテゴリー別一覧のスマートフォン用ページあり（再掲）に示してありますので、ご参照ください。
追加対策
 　上記の「問題点(1)」の欄には「横に並んだ３つの欄」という記述がありますが、横に欄が３つ並んでいるのは「新フォーム」を使って作られているページで、左側に幅広のコンテンツの欄があって、右側にリンク集が並んでいる２つの欄から構成される「旧フォーム」が使われている作品が当美術館には多数あります。
　旧フォームを新フォームに変更すると格段に見やすくなりますが、編集作業に数日を要するので、作業は遅々として進みません。
　そこで、「旧フォーム」のままスマートフォンでも見やすくした「スマートフォン用暫定ページ」を設けました。新フォームを使った場合、パソコン用ページとスマートフォン用ページでは幅が1.43倍違うため、パソコン用のページに比べて格段に見やすくなりますが、スマートフォン用暫定ページでは幅が1.24倍しか違わないので、新フォームを使った場合ほど見やすくはなりませんが、作業時間が格段に短くなるため、当面この方法を用いたスマートフォン用改修を優先させようと思います。
問題点(2)

　スマートフォンでは画像を画面の横幅いっぱいに表示し、それ以上小さく表示（ピンチイン）できないため、画面を縦長に使うと画像が小さくなり過ぎ、横長に使うと大きくなり過ぎて画像の上下が切れてしまっていました。
対策
 　そこで、画像の下にダミーの横に長い画像を表示し、画面を横長に使っても画像の上下が切れないようにすることにしました。

　ただし、この対策を施したことにより、画面を縦長に使うとさらに小さく表示されるようになりましたが、ピンチアウトすることで画像を大きくすることはできますので、必要な場合にはピンチアウトしてください。


対策する前		 ⇒

対策した後
　上の「対策した後」の画像には写っていませんが、実際の画面ではスライドショー画像の下に の文字が見えます。
　本美術館には壁紙画像や横長壁紙画像、クローズアップ写真のスライドショー画像があちらこちらにありますが、それらすべてのスライドショー画像の下に上記の文字が表示されます。これらの文字は、実は非常に横に長い黒背景の画像の一部で、この画像を使うことで非常に横に長いページ構成にできたために、スライドショー画像の上下が切れなくなったのですが、同時にこの画像はリンクの機能も果たしており、この画像をタップ（またはクリック）することで美術館のトップページにジャンプすることができます。
　これまで、パソコン用の各ページのトップの部分（２人の美樹ちゃんが走り回るエリア）をクリックすれば美術館のトップページにジャンプする機能があったことはご存知のことと思いますが、それと同等の機能を持っていますので、必要なときにはご活用ください。

　なお、スマートフォン用のページのトップの部分には「パソコン用のトップページ」と「スマートフォン用のトップページ」、それに「スマートフォン用の What's New !」にジャンプするピンクの楕円のスイッチを設けましたので、適宜ご活用ください。
作業の進捗
 　本作業はすべてのスライドショー画像について完了しています。
問題点(3)

　静止画およびスライドショーの拡大画像はパソコンで見る場合の解像度を前提にかなりの高解像度になっているため、スマートフォンで見る場合には不必要に大容量のファイルをダウンロードする必要がありました。
対策
 　そこで、スマートフォン用のページにあるリンクで開かれる拡大スライドショー画像は中解像度とし、データ量を減らすことにしました。具体的にどれだけのデータ量の削減になるかを作品７４を例に示します。
表．本対策によるデータ削減量 （作品７４の場合）
　
　 対策前 　 対策後 　 削減率
本編 22,328 KB (800 x 1,200 pixel) 6,356 KB (420 x 630 pixel) 71.5%
壁紙コーナー 9,443 KB (800 x 600 pixel) 2,581 KB (400 x 300 pixel) 72.7%
横長壁紙コーナー 15,765 KB (1,280 x 720 pixel) 2,465 KB (480 x 270 pixel 84.4%
クローズアップ写真コーナー 5,478 KB (800 x 600 pixel) 1,362 KB (400 x 300 pixel) 75.1%
合計 53,014 KB 12,764 KB 75.9%
　スマートフォン用にデータ量を削減したページには のマークが付いていますので、参考にしてください。

　なお、静止画に関してはあまりに画像の数が多いことやスクロールして細部をご覧いただくことを想定して、従来通りの高解像度のままにすることにしました。
作業の進捗
 　本作業はすべてのスライドショー画像について完了しています。

本ページのトップへ　／　to the top of this page