タグ：デザイン | 表札・臼・杵・机上名札・銘木工芸品の阿波銘木 公式ブログ

シャレにならない暑さですね。

今日は電気屋さんに来てもらって水漏れしてたクーラーを直してもらいました。

こういう時は東京じゃなく北海道に帰りたいのですが北海道も暑いようで・・・。

今日も都内の一室で作業してます。

お久しぶりのwebシステム担当です。

さて、2017年07月10日に阿波銘木 公式サイトはレスポンシブWebデザイン版を正式にリリース致しました。

ここに至るまで、進捗がはっきり見えなかった時間が多かったので、どうかなーと思っていましたが、

まぁ1次フェーズとしては悪くないスピード感で対応出来たと思っています。

とりあえずですが。

この『とりあえず』というのが、なかなかにタチが悪いです。

阿波銘木のサイトは今までPCのみのサイトとして運営してきました。

要はPC用のページしかなかったということです(当たり前ですが^^;)。

主にPCからスマートフォンやタブレット用にサイトを構築するには2通りのやり方があります。

1つはスマートフォン、タブレット用のページを別途に作ってしまい、サーバーサイド側でUserAgentを取得し振り分ける。

もう一つはレスポンシブWebデザイン。

今回、レスポンシブWebデザインを選択したのにはいくつか理由があります。

・UserAgentは新しい端末が出る度に設定が必要になる可能性がありイタチごっごになる。

・1ページ当たりの管理数が多くなり1人で見切れる状態ではなくなる。

・UserAgentの異なるGooglebotごとにページをクロールする必要がないため、Googleが効率的にコンテンツを発見できるようになる。

・時代のトレンドの作りである。

まぁ、『Googleが推奨しているから。』と言えばそれまでなのですがww

ただ、レスポンシブWebデザインを採用するに当たって大きな問題がありました。

それは阿波銘木のサイトが、PCで閲覧してもらうことを基準にして作られていたというコトです。

レスポンシブWebデザインを採用する場合、まずは小さいディスプレイ用のレイアウトから作成する『モバイルファースト』というやり方が一般的です。

ところが阿波銘木の場合、PCからスマートフォンへという『desktopファースト』というやり方になってしまいます。

この場合、PCで見えるままにスマートフォンへコンバートすると必然的に文字が小さくなります。

PCで当然のようにやっていた横並びを横幅のほとんどないスマートフォン用に無理やり適応させるからです。

これは実際にサイトを見てもらったほうが早いかもしれませんね。

ですので、次のフェーズでは文字を大きくする。横並びの部分を文字サイズを出すために一部縦並びにするといった作業が中心になります。

上記の作業 + その他の作業も含めて2次フェーズのロンチは9月〜10月を予定しています。

とりあえず、頑張ります^^

そういえば都選はモバイルファーストでもdesktopファーストでもなく

『都民ファーストの会』が圧勝しましたね。

色々な意味で2017年07月10日は面白い1日でした^^

今週末に東京から北海道に帰省しますwebシステム担当です。

今回はレスポンシブWebデザインについて。

今年の7月〜8月に当サイトはスマートフォンに完全対応する予定でいます。

このサイトはスマートフォンには優しくないよと天下のGoogle様に怒られたので実際にWi-Fiを使わずに見てみたら、マジでクソ重い(っていうか知ってたけど)www

とは言え、限られた時間の中での改修になるのでなかなかスムーズには進みません。

阿波銘木のサイトのPC版がリニューアルされた当時、cssのサイズはpxで指定をしていました(古い^^;)。

今はrem(root em)という考え方があります。

これはrootという文字通り、一番上の親タグのサイズを元に足し引きするというものです。

例えば、

html{ font-size: 15px; }

p{ font-size: 1.2rem; }

だとしたら、pタグは15px x 1.2rem = 18pxになります。
この例では親クラスの文字サイズ(font-size)を変更するだけで全ての文字サイズが変更します。

これは文字サイズ以外にも親タグで指定した要素に対して適応することが可能です。
メジャーなところでいうとwidth・height・margin・paddingとかでしょうか。

これをうまく使ってブラウザの横サイズが480pxを切ったとき上の要素をコントロールして
スマートフォン専用のページの全体バランスを整えようと思っています。

レスポンシブWebデザインとは上記のようなことを指します。

PC、タブレット、スマートフォンなど、複数の異なる画面サイズをWebサイト表示の判断基準にし、ページのレイアウト・デザインを動的に調整することを

レスポンシブWebデザインと言います。

今、流行りの作り方ですね。Googleも推奨してますし^^

もうPC用、スマートフォン用でuaを見てレイアウトを切り替える時代は終わったと言えますね(物にもよりますが)。

ただ、それ以外のレイアウトはしっかりと考えないといけません。
スマートフォンには横の概念がないので画像とかは新しく作ってもらわないといけません。

この辺はデザイナーに他のスマートフォンのサイトを見ながら勉強してもらいます。

僕自身、スマートフォンのサイトを作ること自体は簡単にできますが、内容が伴わないと意味がありませんからね。
それに暫定的に作ったとしても結局は改修に追われるワケです。


阿波銘木の話は終わり！
昨日は前々から注文していたKensington社のSlimBladeというマウスが届きました！！


マウスに10,000円は高いと思いますが、商売道具ならいくら使ってもいいと思っています。

今日、帰省するためのスーツケースを出しました。
今週の金曜日に登別に帰省します^^

先日、セラミック表札の、流れ星バージョンを紹介いたしましたが、

本日はタイル表札を紹介をしたいと思います。

と、言うか、とても気に入っているので、ぜひ紹介させていただきます(*^^*)。

ブルーのタイル地に、イラストと名字をサンドブラストで彫り込んでいます。

タイル地をモスグリーンやブラックに変えてると、イメージも大きく変わります。

ご自身で星の色を入れてもいいですね(*^-')b。

11月18日は、しし座流星群が出現する予定ですし、

クリスマスも待ち遠しいので、流れ星の表札を作ってしまいました☆。

ほんとうは、3年ほど前に製作はしていたものの、社長の反対で商品化には至らなかったのです(　┰_┰) ｼｸｼｸ。

可愛らしい表札になりすぎたせいか「遊び半分で作るな」と怒られる結果になりましたが、むしろ、表現が難しくて、いろいろ試作なども重ねた結果、やはり、流れ星な表札があってもいいな、と事務所の壁にひっそりと貼っておきました。

ワンポイントの星を表札に取り入れるお客様も多いので、このたびは思い切って表に出させていただきました。

タイルとセラミックの2種を作成しましたが、今日はセラミック材セラミィを紹介します。

ライラック色のセラミィに、星を金色、文字は黒、流れるラインは透かし彫りです。

白文字だと、ロマンチストでおしゃれな表札になりそうですね＾＾。

 タイル表札の中で、ダントツ人気なのが、赤い実ふくろうさんです、ホ～ホ～(・)v(・)。

こちらの商品は、愛知県のお客様からのお問い合わせによるオリジナル表札でして、

完成してみると、赤い実が、か・かわゆい！（翻訳　かわいい）

こうして、お客様からの提案による新製品は2013年秋に誕生しました。

有難うございました！！

阿波銘木の社員は自分の表札を作っていいとのことです。

僕はシステム開発(しかも社員じゃなくフリーランス)なので表札を作ったりする技術はないのですが、担当の方にお願いして作ってもらいました！！

デザインはこれ↓↓

ちなみに僕は鈴木ではありません^^;

梟(フクロウ)の絵が入ったデザインが人気とのコトでしたのでこちらで作成してもらいました。

その他にも色々なデザインがありますのでこちらからチェックしてみてください！！

ちなみに、阿波銘木は赤日は受付け以外休みなのですが、

僕は午後から久々にじいちゃんに会いに行く予定だったので、それまで出社してました^^