\subsection{インターフェースWeb}
今回のシステムは，スマートフォンなどの小型モバイルデバイスを用いて，
自宅，あるいは現地に赴いての利用を想定している。
また，地域の「思い」を伝えることを主眼としながらも，
それが敬遠されにくくなるようゲーミフィケーション要素を採り入れる
工夫を施した。

\subsubsection{レスポンシブデザイン}
後述するように，デバイス上に表示される地図を見ながら現地を回るケースでは，
画面を縦置きにして見る場合が想定されるが，自宅等でPC画面でアクセスする場
合は横長の画面となる。

いずれの場合も
CSS3の@mediaを用いることでスクリーン(画面,ウィン
ドウ)の縦横比を検知させそれに合った比率の画面が提示される(図~\ref{tate}，
図~\ref{yoko})。縦横比による画面切り替えの記述を図~\ref{media}に示す。

\begin{figure}[tb]
 \begin{minipage}[t]{0.48\columnwidth}
 \begin{itembox}[l]{縦長画面用定義} 
\begin{verbatim}
@media screen and 
(orientation: portrait) {
 /* スタイルの記述 */
}
\end{verbatim}
 \end{itembox}
 \end{minipage}
 \begin{minipage}[t]{0.48\columnwidth}
 
 \begin{itembox}[l]{横長画面用表示}
 \begin{verbatim}
@media screen and 
(orientation: landscape) {
 /* スタイルの記述 */
}
\end{verbatim}
 \end{itembox}
 \end{minipage}
 \caption{縦横自動検知デザイン切り替えのための記述}
 \label{media}
\end{figure}




\begin{figure}[tbp]
\centering
\subfigure[縦長表示]{
\includegraphics[width=0.25\columnwidth]{page_tate.pdf}
%\caption{縦画面}
\label{tate}
}
%\end{figure}
%\begin{figure}[tbp]
%\centering
\subfigure[横長表示]{
\includegraphics[width=0.65\columnwidth]{page_yoko}
\label{yoko}
}
\caption{縦置き横置きに連動したデザイン}
\end{figure}

%ロード画面を
%表示させるHTMLファイル内のscriptタグにjQueryを指定するURLを記述すること
%でライブラリの利用を可能にしている。実際のロード画面は，gif画像とNow
%Loading...の文字をHTML内で追加することで構成している（図\ref{load}）。以
%下はロード画面実装の記述である。
%
%\begin{itembox}[l]{ロード画面の実装} 
%\begin{verbatim}
%$(function() {
%　var h = $(window).height();
%　$('#loader-bg ,#loader').
%　 height(h).css('display','block');
%});
%//開いているウィンドウの高さを取得し
%新たなを画面貼り付ける
%
%$(window).load(function () {
%　$('#loader-bg').delay(900).
%　　fadeOut(800);
%　$('#loader').delay(600).
%　　fadeOut(300);
%});
%//全ての読み込み完了後，アニメーショ
%ンさせながら非表示にする
%
%$(function(){
%　setTimeout('stopload()',5000);
%});
%//5秒後に強制非表示
%
%function stopload(){
%　$('#loader-bg').delay(900).
%　　fadeOut(800);
%　$('#loader').delay(600).
%　　fadeOut(300);
%}
%\end{verbatim}
%\end{itembox}