「ゆるりら、十和田こども検定」（主催：ゆるりら、十和田こども検定実行委員会、事務局：十和田商工会議所）様ホームページが公開されました。

 

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による検定要項をダウンロードしてもらう、という運用対処となりました。

もう少ししたら、足並み揃うかな。。。。

十和田市にある税理士事務所（社会保険労務士業務、中小企業診断士業務）の「高野事務所」様のホームページを新規立ち上げました。

こちらも、公開は今年の2月でしたので、制作実績の報告が遅くなりました。申し訳ございません。

 

URL：http://takano-tax.biz/

新たに独立開業されたとのことで、ホームページの立ち上げのご依頼をいただきました。

開業に伴うホームページの新規立ち上げとなるので、目的としては、企業サイト（コーポレートサイト）をベースに、業務紹介がメインになります。

簡潔に、シンプルに、事業コンセプトが明確になるように、情報構成とページ構成を設計しました。

デザインの方向性としては、業務カテゴリーを考えると、出来るだけ清潔感を損なわないようにする必要がありますので、クライアント様と検討した結果、青ベースでの作成となりました。アクセントはオレンジ色としてメリハリを付けました。

また、見出しや重要文字は出来るだけ「游明朝」（他は明朝系のフォント）で、「しっかり」感を求めました。

なお、クライアント様がブログをやっていたということもあって、サイト内にブログを設置（旧ブログの統合＆引っ越し）させる構成にしました。つまりは、「CMS使いました」というオチですね。

 

 

新規立ち上げということもあり、クライアント様のご要望や要件が明確でしたので、情報設計や原稿の準備など、こちらの計画したスケジュールよりも順調に制作が進められました。

また、ちょうど直前にCMSを使ったサイト制作を行ったばかりでしたので、PDCA回す感じで、もろもろ作業効率をアップできたのも要因のひとつでしょう。

ただ、ここ何件かの案件を経て、本当に感じることは、どの案件も同じ作業工程がないということです。

作業効率をアップさせるためには、同じ作業工程を繰り返して精度を上げていくのがベストなのでしょうが、ことWeb技術の日進月歩には適用できません。

いや、分進時歩（？）なみの技術進歩のため、制作過程がどんどん変わっていきます。もちろん、昔ながらの方法を貫き通すことも方法のひとつではありますが。。。

Adobe をはじめとするソフトや物凄いテキストエディタ、Androidシミュレーターなど、様々なツールの革新や、いろんな人の作業工程の改善アイディアなどを目の当たりにしたら、どんなに新しいモノだろうと使わない手はないわけですね。

新しい手法を採用しないで制作作業する方が、よっぽど効率悪いし、出戻りが大きいだろうなと、容易に想像できるわけです。

そういうわけで、当事務所のやり方は、これまでの経験やスキルをベースにし、でもそこに固執ぜず、常に新しい考え方や未来予想図を見据えて、やみくもに手を付けるのではなく、冷静に効率的に吸収して成長していく。というスタンスで行きたいと思います。

 

とは、いうもののこちらのサイトも、実は暫定スマホ対応で、viewpotなしで、CSSでのmediaクエリのみとなっています。

vewportを使った本格「モバイルフレンドリー」対応は、様子見です。
業務内容やターゲット的にみても、必要性が低いからです。

十和田市にある注文住宅専門の建築工房、「豊川建築工房」様のホームページをリニューアル公開いたしました。

URL：http://toyokawa-kk.com/

 

遅くなってすみません。公開自体は、2014年12月と去年の暮れです。こちらでの発表が遅くなっただけです。(^_^;)

旧サイトは、ウッドテイストを全面に押し出したデザインで、工房の特長を表現していたのですが、近年の施主様の方向性としては、「モダン」や「スタイリッシュ」というキーワードのデザイン／スタイルが求められているとのことで、思い切ってホームページのデザインも一新することになりました。

また、ホームページ本体と、無料ブログを使用していたため、ブログの更新によるサイト運営評価が、ホームページ本体に反映されていないという課題もあり、本体とブログをひとつのサイトにまとめて、サイト全体の効果をアップさせることが、いちばんの目的となりました。

 

 

そういうわけで、やっぱり「CMS」導入となりました。これまで、比較的「CMS」導入には、様々な観点からお客様にはおすすめしていなかったのですが、今回のケースのように、情報発信を定期的に行っていたり、実績をたくさん掲載する必要がある場合は、これはもう間違いなく「CMS」導入です。

どのCMSを使ったか？については、まぁ、お分かりかと思いますが（汗

さて、今回のリニューアルしたサイトの制作過程でのポイントを解説してまいります。

 

 

まず、全体のデザインですが、いろいろとヒアリングや検討を重ねて、ナチュラルな緑色をメインカラーにしました。ただ、どちらかというと青よりな微妙な緑にしてあります。トーンは落ち着いた感じ。

でも、やっぱりウッドテイストが工房の特色ということで、木目を入れたいというご要望から、木材っぽい色をサブカラーにしてあります。でも、これ、よくみると実は、ドアや床材を写真で撮って、これをPhotoshopで加工して、バランスとった素材です。よーーーーく見ると、木目がうっすら見えます。そういうちょっとしたニュアンスが全体の雰囲気を柔らかくしているんです。（と思います。^^;）

基本のフォントは、スタイリッシュな方向にするために、出来るだけ細字のものを使いたかったので、「游ゴシック」にしました。ロゴ文字などに使用しています。たぶん、Macでも行けるはず。。。かも？（汗

見出しで使う欧文フォントは、Google Webフォントの「Raleway」を使いました。日付などの数字は、ね、あれです。(^^;

 

 

住宅屋さんということもあり、出来るだけ写真画像を大きく配置するようにしました。特に施工実績やモデルハウスは。

また、施工実績では、タグ機能を「特長キーワード」として、どんな方向性や特長で施工したのか？が分るように。さらに、参考にしたい施主様が、参考にしたい判断材料としてのキーワードがすぐにわかる、選べるようにしました。

これは、一例ですが、CMSの機能をサイトの機能や用途にふんだんに活用してみました。

 

 

また、お問合せフォームも設置。

それから、暫定でなんちゃってスマホ対策してあります。残念ながら、なんちゃってなので、iPhoneなどAppleの端末か、Android 端末の最新機種（たぶん、4.3以降）じゃないとレスポンシブになりません。

今回、クライアント様のご了解をいただき、正式に「モバイルフレンドリー」対応に着手する運びとなりましたので、もうしばらくお待ちくださいませ。