ショコシス妹の魔法のレスポンシブwebデザイン 2013

ショコシス姉のおひとりさまハッカソン 2013として、11月30日にスタートさせた

「日本酒世界へ広め隊」を、

この度、

ショコシス妹の魔法のレスポンシブwebデザイン 2013

として、

Bootstrap 3 -> 妹独自のレスポンシブデザインCSS

へと変身メークオーバーさせてみました！


まずは、見た目の変身振りをスクリーンショットで簡単にご紹介。


デスクトップ＆ノートブック等、PCの画面では、Bootstrapでありがちなデザイン



が




に。


タブレットだと、こんな感じ。



スマートフォンだとこんな感じ。



見た目がスッキリとしたおしゃれなデザインになっただけでなく、プロのWebデザイナー（フロントエンドエンジニア）として、こだわりを持つショコシス妹は、よりユーザーにとって使い易いサイトをと、スクロールやクリック/タップの回数を減らしたり、見えない部分にもたくさんのテクニック(姉はこれを、妹の魔法のデザインと呼んでいます！）を使って、独自デザインへの変更を行っています。

デザインや機能的コーディングだけでなく、妹のデザインは、常に軽量化にも拘っています。
bootstrapでは100KBあったスタイルシート(CSS)も、妹の独自スタイルシートは12KBと、軽量化に成功。
また、HTMLでも、bootstrapでは必須となる無駄なタグやクラスを使用せず、すっきりとさせてあります。

注…もし、仮に、余分なタグ等がコーディング内に見つかったとしたら、姉の分担であるPHP内で動的に各ページを自動生成する際に、姉が修正を忘れたとみて間違いありません！(汗;)それくらい、妹のデザイン＆コーディングは徹底していて、いつも完璧！(姉も見習わなければ…。滝汗)


新しいデザインで、より使い易くなった「日本酒世界へ広め隊」を、どうぞ宜しくお願いしま～す！


今後の計画としては、
１．よくある質問のページを完成させ
２．ショコシス祭り　番外編でつぶやいた気になる蔵元さんの記事を書き
３．Google Adwords認定資格に合格している姉によるインターネット広告実験を行い

その後、一段落したら、英語サイトを作成すると共に、オンラインマーケティングの対象を英語圏へと拡大する予定です。
夢は大きくどこまでも～♪

ショコシス姉のおひとりさまハッカソン 2013

ショコシス姉のおひとりさまハッカソン 2013として、11月30日に

「日本酒世界へ広め隊」

を作ってみました。


いやはや、また、どうしてそんな企画を思いついて、いきなりサイトを一日で作ってしまったのか、、、を説明する前に、おひとりさまハッカソンについて、ちらっとご紹介～♪

おひとりさまハッカソンとは？

おひとりさま(←読んでそのまま、ショコシス姉の人生そのもの。独りってことです。汗;)

＋

ハッカソン (from ウィキペディア フリー百科事典)
ハッカソン（英語: hackathon、別名:hack day,hackfest,codefest）とはソフトウェア開発分野のプログラマやグラフィックデザイナー、ユーザインタフェース設計者、プロジェクトマネージャらが集中的に共同作業をするソフトウェア関連プロジェクトのイベントである。

＝

独りで集中的に作業をしてＷｅｂアプリケーション等を一気に開発

ここから本題で、
「日本酒世界へ広め隊」を立ち上げるに至ったストーリーの始まりはじまり…。


それは、11月も終わろうとする、とある日のことでした。。。

いつもの様に(って、11月22日に始めたばかりですが…)、ショコシス祭り　番外編として行っている、さけ脳トレで出題された日本酒の銘柄をTwitterでつぶやくことをしていたら、、、

なっ、なな、なんと～
「さけ脳トレ」の出題に利用させていただいているデータベースに、間違ったデータが登録されていることを発見しました。。。

しかも、その間違いの内容が、日本酒の銘柄が、違う蔵元さんのデータに結び付けられているというものでした。。。

直ぐに、データベースを管理されている方にご報告し、訂正のつぶやきも行った姉です。。。

姉の昨日のつぶやきに、訂正があります。福の聲(ふくのこえ)は、愛知県ではなく、三重県伊賀市の福井酒造場さんのお酒でした。妹に負けないように、試飲即売会みたいな情報を…と検索していて気づきました。Sakenoteさんに既に報告済みです。間違いは遠慮なく指摘して下さ～いとのことです。

— Chocosis (@chocolatsisters) 2013, 11月 27

が、しかし、諸事情により、データベースの訂正は、直ぐに行っていただけないみたいで…。

「さけ脳トレ」での対応：
現在までに見つかっている、蔵元データに登録間違いがある四つ六つの日本酒銘柄が出題された際には、正しい蔵元についてのメッセージが追加表示される様に、修正しました。(妹のアイデアにより実現！登録間違い情報のデータリストを別に作り、マッシュアップさせました。)

落ち込んだ姉は、、、姉の日本酒への想いを妹に連絡。。。

酒造さんって、こだわりや愛を持って、お酒を造ってるんだと思う姉。
自分が作ったお酒を、他の酒造さんのお酒として紹介してあるって、悲しいと思う。。。
例えば、姉妹で一生懸命こだわって作った「さけ脳トレ」を、名前が良く似た他人のショコラブラザーズ作とかって紹介されてたら、嫌だもの。

姉の日本酒への想いの背景
ショコシス姉は、ニュージーランドワインも大好きで、「ニュージーランドワイン見つけ隊」というサイトを、2002年からずっと運営していました。クライストチャーチの地震で、いろんなことがヒッチャカメッチャカになって、しばらくサイトの運営もお休みしていましたが、そろそろ復活させようと思っています。

姉が、ニュージーランドワインが大好きになった理由は、いろんなワインメーカーさんやワイナリーさんの本を読んだり、実際に訪ねて取材したりして、「ワインの銘柄一つ一つ」に、「ワインメーカーさん一人一人」に、そして、「ワイナリー一軒一軒」に、それぞれ背景となる歴史やストーリーがあって、しかも、ワインは、全く同じ事を、全く同じ人が、全く同じ工程で行っても、毎回全く同じワインが出来るわけではないという、何が起こるか分からない驚きを常に持っていることに気づいたからです。
原料となる葡萄も、天候やその他、人がコントロールすることが出来ない要素をたくさん持っていて、収穫するまでも収穫した後も、その葡萄を使って最終的にワインが出来上がるまで、確実なものは何一つ無い神秘さや不思議さをワインは持っています。

葡萄という素材、ワイン造りの過程で変えられる状況、変えられない状況、関わる人たちの知識や技術や経験、そして努力等の全てがコラボして、ワインが出来上がる、、、というストーリーに、何となく、自分の人生を重ね合わせてしまったのかも知れません。

自分という素材、自分で変えられる状況、変えられない状況、そこに、自分の知識や技術や経験、努力等が加わって、さらに、たくさんの人たちとの出逢いや運、タイミング等、未知の要素も絡んできて、人生のストーリーが出来上がっていく…。

日本酒も、なんだか、ただ美味しいとか、飲んでいる瞬間だけを味わうのじゃなくて、その背景にある、お米が出来るところから始まって、蔵元さん達が込めた努力や想いみたいなものも味わいたいというか、大切にしたいと思う姉です。

毎年毎年、最終的にはどうなるか分からない不安定さを持ちつつも、何かを完成させていくこと、そして、それをずっと継続して行っていくこと、、、何だか、もの凄く大きなパワーというか、勇気を貰える気がします。

それなのに、、、違う蔵元さんを造り手として紹介してしまうなんて、、、とても悲しくなってしまった姉です。

さ～て、ここまで読んで下さった方って、ほとんどいらっしゃらないかも知れませんが…。(滝汗)

たぶん、読んで下さった方は、「そんな細かいことを」とか、「大袈裟な～」とか、笑うか呆れられたと思います。。。


でも、妹のまふは違いました。

悲しむ姉に共感してくれて、間違ったままだと「日本酒への愛が感じられないね」と。(←理解を示してくれた妹に、姉、号泣)



ということで、急いで、「愛」の感じられる日本酒に関するサイトを作りたくなってしまった訳です。

出来れば、最新の情報を正しく提供出来るサイト。


そしてそして、2013年11月30日の1日集中型「ショコシス姉のおひとりさまハッカソン 2013」となりました。
(一日で、一応、サイトのベースや初期コンテンツは全て完成させましたが、その後も、チョコチョコっと手を加えてあります。)


サイトの内容の詳細については、長くなったので、次回に。

また、姉が作ったサイトは、Bootstrap 3というフレームワークを使ったサイトデザインを行っていますが、今後、ここに、妹が、ショコシス妹のCSSデザインマジック(Bootstrap -> 妹独自のレスポンシブデザインCSS)を加えてくれる予定です。

新デザインが完成したら、BeforeとAfterとして、デザインの比較を行う予定です。
妹のWebデザイン(見えないコーディング部分も含めて）の大ファンである姉は、妹まふによる「日本酒世界へ広め隊」の変身メークオーバーが今から楽しみ楽しみ～♪

※妹によるメークオーバーの詳細は、ショコシス妹の魔法のレスポンシブwebデザイン 2013にスクリーンショット付きでアップしてます。いや、もう、びっくり、大変身～♪