「ゆるりら、十和田こども検定」（主催：ゆるりら、十和田こども検定実行委員会、事務局：十和田商工会議所）様ホームページが公開されました。
URL：http://www.towada.or.jp/kodomokentei/
5年前に、「ゆるりら、十和田検定」のホームページをお手伝いしたこともあり、今回、小学生向けのこども検定「ゆるりら、十和田こども検定」のホームページもお手伝いさせていただくことになりました。
ご相談いただいた資料（原稿）では、複数ページでサイトを構成するほどでもなく、1ページでサクッと構成して欲しいという要件でしたが、折角なので、1ページ構成でも、しっかり作ろうと企画しました。
まず、基本的なターゲットは、受検対象の小学５・６年生としました。
※実際に、ホームページを見るかどうかは別に、もし見たら、という想定です。
それにより、原稿の文章や文言、言い回しを可能な限り、簡素化して校正しました。また、逆にこのくらいは漢字読もうという意味合いも込めて、重要な見出し文言には、ふりがなをふっています。
また、文言を統一して、混乱しないよう気を使いました。例えば、「検定」と「試験」とか、「受験」と「受検」などです。
そういうわけで、デザイン云々よりも文章校正に気を使いました。
でも、いちおう当事務所は「Web Design Office」とうたっているので、デザインもがんばりました。
1ページ構成の場合、セクションの区分けが解りやすいように、背景色で切り分けるのは、スタンダードですので、ここもこの手法でいきました。コンセプトカラーは、いろいろ試しましたが、明るい、かつ、落ち着いた緑色を選択しました。別案は、オレンジでしたが、十和田市のPRキャラクターがピンク色を使っているので、暖色×暖色はメリハリがないので、却下となりました。
キャラクター画像は、ちゃんと手続きを踏んで、クライアント様経由で、十和田市役所から許可いただいて、使用しています。
※イラスト画像なんで、「.ai」とか「.eps」、最悪「.png」かと思ったら、一部の画像が「jpeg」だったので、ギョッとして、規定範囲内で補正させていただきました。(^^;
今回、新たにチャレンジした要素のひとつは、本格的な日本語Webフォントの利用です。
ちょうど数か月前に、Adobe TypeKit で日本語Webフォントが本格的に使えるようになったので、ちょうど小学生向けのターゲットということも重なって、バッチリ使いました。どうでしょう？誰でも、パソコンでも、スマホでも、丸ゴシックで見られますよね？(^-^b
ただし、やっぱりフォントダウンロードのタイムラグが若干あるので、ページが表示されるちょっと前に、フェードインしてくる効果を仕込みました。ちょっと誤魔化せたかな？
さて、もう一つチャレンジした要素は、本格的なモバイルフレンドリー対応です。これまでの暫定対処じゃないです。（個人的には、viewportなしのmediaクエリのほうがしっくりくるんだけど・・・・）
今年の4月にGoogleが提唱した「モバイルフレンドリー」の指針に沿ってCSS調整を行いました。
iPad向け（width：768px）の表示
いろいろ調査して、当事務所のブレークポイントは、960／768／600／480 にしています。
今回、本格的に「モバイルフレンドリー」対応に踏み切った理由ですが、ターゲットを小学生としましたが、実際は、小学生をもつ親御さんが、真のターゲットかなと考えています。
その場合、小学生の親御さんの世代を考えた場合、パソコンで閲覧する割合と同じくらい、もしくはそれ以上の割合で、スマホからの閲覧数があると想定されます。つまり、パソコンを持っていない、または使えないけど、スマホは持っているということですね。
ということを踏まえて、今回本腰を入れてみました。まぁ、既に暫定スマホ対応（viewportなしのmediaクエリ）はやっていたので、コツは掴んできましたが、今回かなり洗練できたかなと思います。
600（Nexus系向け）／414（iPhone6+）／320（iPhone5）
ただ、ここまでやってみるとやっぱり、Sassとかやんないとダメかなぁとか、Bootstrap系のフレームワーク入れんのかなぁとか考えちゃうわけですね。
でも、ホントにフレームワーク入れると楽なの？って、まだやってないけど疑問視しています。だって、そのおかげで、みんな同じサイトになってるじゃないですか。なーんかつまらん。
それに、結局細かいところの調整って必要でしょ？チマチマと。。。
あれこれ言う前にやってみろって感じなので、とりあえず、次の機会があれば、Dreamweaver CC 2015に入っているBootstrapを使って制作してみたいと思います。
それで、話は戻って、「スマホ対応」というよりも、Googleの「モバイルフレンドリー対応」ですが、Googleのテストでは合格でした。
また、iPad／iPhoneでの表示やシミュレーターでもOKでした。
しかし、Android が問題。
シミュレーター（Genymotion）では、4.3以降は問題なしで、4.2以前だと縦はダメで、横にするとOKだったので、これで行けるかと思ったのです。
がしかし、実はスマホ利用者のほぼ大多数が回転ロックしていることが判明。なので、シミュレーターで横向きOKは、全然OKじゃないということです。
ちなみに、2.3とかは、CSS3が全然ダメですが、それなりにスマホ対応してくれます。ホント、Androidは罪ですよ。とほほ。
※というよりも、日本メーカーのAndroid端末が、画面解像度とdp解像度を無視して作ってたんじゃない？と思うんですがどうでしょう？個人的な感想ですけどね。
ただ、今回は、諸事情により、これ以上の対応はなしとして、スマホで見づらい方には、パソコン閲覧か、PDFによる検定要項をダウンロードしてもらう、という運用対処となりました。
もう少ししたら、足並み揃うかな。。。。
