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

 

、ですね。

01つぼみ

 

桜も咲きましたね。

02_さくらさく

 

ひよどりも鳴きますね。

03_ひよどり

 

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

04_スマホに映る桜

 

というわけで・・・

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

05_リニューアルホームページ

 

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

06_スマホにぴったりなデザインです

 

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

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

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

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

 

***

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

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

 

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

07_デスクトップ01

 

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

07_デスクトップ02

 

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

07_デスクトップ03

 

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

07_デスクトップ04

 

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

08_スマホで見るサイト

 

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

とってもいいですね♪

 

***

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

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

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

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

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

top_photo01 top_photo02 top_photo03 top_photo05 top_photo06 top_photo07live_photo01live_photo03live_photo04live_photo05live_photo06live_photo07live_photo08live_photo09live_photo10

 

う〜ん、アツいぜ☆

 

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

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

詳細お問い合わせはこちらボタン2016

 

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

 

Follow me!

コメントを残す

メールアドレスが公開されることはありません。 * が付いている欄は必須項目です