2016年ホームページをリニューアル☆（スマホ対応レスポンシブデザインに挑戦！）

 

春、ですね。

 

桜も咲きましたね。

 

ひよどりも鳴きますね。

 

お花見すれば、スマホの画面にも桜が映りますね。

 

というわけで・・・

ホームページをリニューアルしました！

 

最近、スマホでご覧の方がとても多いので、
スマホで見やすいように設計＆デザインしました☆

 

以前は長〜い１ページ構成だったけど、内容がどんどん増えて重くなっていたので、
今回のリニューアルではページをちゃんと分けて軽くしました。

ぜひ一度、お手持ちのスマホでご覧ください☆

総合トップページ
https://kechamayo.jp/

コンサート紹介ページ
https://kechamayo.jp/performance/

 

＊＊＊

もちろん、パソコンでご覧の方もいらっしゃるし、画面の大きさもいろいろなので、
どんなデバイスでも見やすくするため、今回は
『レスポンシブ・デザイン』という考えで制作しました！

ここでいう「レスポンシブ」とは、
「ウィンドウサイズに合わせて自動的にデザインを最適化する」ことなのですが、
どういうことか、画面でご説明いたしますね。

 

まず、僕のデスクトップ画面。ワイドですね。

 

ここにブラウザでサイトを表示するとこんな感じ。
右に青いメニューがあるこの形がいわゆるパソコン用のデザインですね。

 

ぐぐぐっとウインドウ幅を狭めていくと、右メニューがなくなり下にメニューの帯が出ます。
これくらいがタブレットでの見え方かなぁと思います。（検証していません！）

 

最小幅まで狭めるとこんな感じ。スマホの方はこれくらいの感じかと思います。

 

実際は縦幅も狭まるのでこんな感じ。

 

さらにそれをひとつのファイルで対応できるようにしているので、
（PC用・タブレット用・スマホ用などとファイルを分けていないので、）
ひとつのファイルを更新するだけでいろいろなデバイスに対応できちゃいます。

とってもいいですね♪

 

＊＊＊

ナオヒロは昔、webデザイン制作のお仕事をしていましたが、
その頃から考えてもスマホやタブレットなど新しいデバイスが普及してきて、
またPCモニターも、すごい大画面もあるしモバイルノートの小画面もあるし、
さらにいうとMacもWindowsも、iOSもAndroidもあるしフォントからして違う！
本当にいろいろな環境で見られるようになっています。

そんないろいろな環境で大事なのは、
「カンペキなレイアウトを1ピクセルも違わず表示する」ことじゃなく、
「それぞれのデバイスに最適なレイアウトで読みやすく表示する」こと。
まさにひとりひとりの環境に「応答(レスポンシブ)する」ことだと思います。

さらに、レスポンシブが当たり前になった時に求められるのは、
「見た目の綺麗さ・派手さ」よりも、
「中身の熱さ・ユニークさ」だと思います。

その点、ケチャマヨのサイトは任せてください！

夫婦ふたりのオリジナルな、思いを込めた活動ですので
スマホで見る方にも、パソコンで見る方にも、
この情熱はきっと届くと確信しています☆

 

う〜ん、アツいぜ☆

 

これから何かイベントを企画されている方がいらっしゃれば、
「動く！大きな絵があるコンサート」を日本全国どこへでもお届けするケチャマヨのことを、
このホームページでご紹介してください。

★コンサート詳細・お問い合わせはこちら
https://kechamayo.jp/performance/

 

このサイトから、
ケチャマヨが世界に届きますように。。。