mbd-cover
Releases

真ん中バースデーWebサイトリニューアルしました!

こんにちは!新人森田です。
街で新入生や新社会人な方々を見かけたり、新年度や新学期が始まったりと、新しいことづくめの季節になりましたね。 この空気だけで結構ワクワクしちゃうから春って好きです。
ではフレッシュな感じに今回もはりきって告知します!

なんと! 真ん中バースデーのWebサイトをリニューアルしましたー!

http://www.mannaka-birthday.com/

どのへんが変わったのかというと、

1、ロゴ周辺をリデザイン

0410-1

以前はロゴの下にキャッチフレーズやデモ画面の紹介等を置いていたんですが、ちょっと散漫な印象が。。
あとは、新機能の実装するためのスペース確保をするために周辺要素をひとまとめにしてみました。

まずロゴとデモ機を合わせました。 App Storeのボタンもこのどこかに配置するとのことだったので、リボンをあしらって目立たせ&まとまり感を演出。左側に空いたスペースには無料ダウンロードのメッセージを入れようと試行錯誤していたら、バッジ形式がよさげでした。フォントに他とは違うやわらかい明朝体を使って、ペタッと貼ったようなちょっと変わった質感を出しました。明朝体は単なる思いつきだったけど気に入ってます。 色はリボンと合わせて全体のトーンを整えつつ、これならキャッチコピーは上かな!という流れで完成!

情報が一カ所にまとまったことで、見てほしいポイントが絞られる効果もあったんじゃないでしょうか。
で、この下に空いたスペースに何を置いたのかというと。

2、おためし計算機能実装

0410-2

はいっ!こちらです!

web上で真ん中バースデーをおためし体験できます

名前は入れなくても調べられるので、是非使ってみて下さいね。
ただし、おためしは1日1回までなんですすいません。
もっと調べてみたい時はApp storeからアプリをダウンロードしていただけると嬉しいです!

真ん中バースデー on the App store

単に説明だけだったWebページでしたが、内容が充実してきました。
前に見ていただいた方もよろしければ是非おためししていってみてください。

http://www.mannaka-birthday.com/

次回アップデート予告!

ただいまハレノヒでは現在進行形で真ん中バースデーアプリのアップデート作業を遂行中です。
プログラムの方は師匠がすでにバッチリ作り上げてくださっております。
私の方の素材準備が間に合うかどうかのギリギリなところですが、間に合わせてみせる…!

iPhoneだけどFacebookアカウント持っていなくて真ん中バースデーを調べられなかったという方!
お待たせしました!

次のアップデートでは、Facebookアカウントなしでもアカウント作成出来るように仕様変更いたします。

今までだいぶユーザーが限られてしまって申し訳なかったのですが、これでもう少し広げられるんじゃないかと思います。
また、Facebookアカウントなしでアカウント作成した場合は友だちが0人の状態からのスタートとなります。 そうなっても寂しくないように、もう1つのアップデートをご用意しておりますのでどうぞお楽しみに!!

今回リニューアルした真ん中バースデーwebサイトでおためししたい方は、
http://www.mannaka-birthday.com/

真ん中バースデーアプリをダウンロードしたい方は、
真ん中バースデー on the App store

どうぞよろしくお願いします!!

標準
title-feature
Design

スタイリッシュ!デザインの参考になるNYのホテルのWebサイト特集

こんにちは!新人森田です。
今日こそは暖かいんじゃないかと思って外に出ると期待を裏切られる毎日です。
むしろ雪が降りました。
最近くしゃみがよく出ますがこれはまだ花粉症ではないと信じてます。

今回はいつもと趣向を変えて、デザインの参考になるWebサイトを特集してみます。
暖かくなったら重いコートを脱いで、お出かけもはかどりますね。
お花見やいちご狩りと日本にも素敵スポットは沢山ありますが、せっかくならNY行っちゃう?!

というわけで特集内容はこちら!
(NY旅行にも役立つかもしれない)デザインの参考になるNYのホテルのWebサイト特集

ではいってみましょう。

堂々たる高級感!

ホテルから連想されるワードとして挙げられるもののひとつに「高級感」があります。
歴史ある一流ホテルにはそれにふさわしい雰囲気作りが必要です。

THE HIGHLINE HOTEL

hotel-1

http://www.thehighlinehotel.com/

これぞ正統派といえそうな佇まいです。
余計な装飾などは加えず、ナビゲーションはモノトーン。
丁寧に撮られた写真と、饒舌すぎないコンパクトにまとめられた情報から上質さを感じます。

THE NOMAD HOTEL

hotel-2

http://www.thenomadhotel.com/

こちらはまずページの黒枠に目がいきます。
フィルム写真を見ているかのような感覚がします。
コンテンツそれぞれにフルサイズの画像が使われているので、その世界観に引き込まれてしまいます。
また、米仏伊独日の言語にローカライズされていてるのも嬉しい。

フォント選びが素敵!

「高級感」といえばかっちりとしたセリフフォントを想像しがちですが、それだけではスタイリッシュとはいえません。
上品かつオシャレに演出されたサイトを見たら旅行したい衝動が一層強まります。

WYTHE HOTEL

hotel-3

http://wythehotel.com/

今回紹介した中で唯一きちんとレスポンシブしていたサイトでした。
トップページを見るとカジュアルめな印象を受けますが、本文にはセリフ体が使われていてあくまで見出しの役割のようです。
メリハリがあって好きなテイストです。
提携している(?)レストランのページもオシャレ。

THOMPSON HOTELS

hotel-4

http://www.thompsonhotels.com/

左上に予約ボックスが固定されていながらも、ページ全面を使ったレイアウトにはスタイリッシュとしか言いようがありません。
予約ボックスの横のナビゲーションが実はパンくずみたいな機能も果たしていてシビれました。
各要素のポジションが%で定義されていたので、ある程度の画面サイズの変化には耐えられそうでした。

REFINERY Hotel

hotel-5

http://www.refineryhotelnewyork.com/

今までのサイトとは違って、ギャラリーサイトみたいな、雑誌を読んでいるみたいなレイアウトです。
黒背景に写真の色が際立っています。
全体の雰囲気に合わせた手書き風フォントがかっこよかったり、でもどこか親しみやすい感じがしたり。

リゾート感あふれてる!

異国への旅はまるで非現実の世界に来たかのようです。
あふれるリゾート感もまた、もうここ行くしかないわって思っちゃう理由のひとつです。

THE Jade Hotel

hotel-6

http://www.thejadenyc.com/

indexページと各コンテンツページの見せ方に差があって分かりやすいです。
随所に使われている花モチーフのパターンが全体の雰囲気を引き立たせてくれています。
差し色が赤だったりと色使いが絶妙。

THE JAMES HOTELS

hotel-7

http://www.jameshotels.com/

見るからに開放感あふれちゃってます。
こういう広々のびのびとした空間の使い方は海外ならではな感じ。
NYのホテルっていうテーマなのにマイアミのビーチに目がいきまくってしまいます。
これはあれですね、旅行業界におけるシズルというか。今すぐ旅立ちたい!

まとめ

いかがだったでしょうか。
コンパクトかつ使いやすいナビゲーション・迷わないUI設計・フルスクリーンでスライドする写真などなどスタイリッシュさ満載で、さすがWeb先進国という感じでした。
何よりやっぱり毎回思うけど海外の写真とか英語はずるいです。
でも日本にも日本の良さがあって、日本という文化圏に合わせた、使いやすくスてタイリッシュなWebサイトってきっとあるはず。
今回紹介したようなWebサイトに刺激とエッセンスを貰いつつ、どうやったらそれが実現出来るのかを日々模索します。押忍!

標準
blog-0221b
Design

ブログをプチリニューアルしました

こんにちは!新人森田です。
今日はアプリ博2014を見学してまいりました。
ユーザーでいるだけでは気付かないようなアプリの裏側を垣間見ることが出来たり、
名刺交換させていただいたりととても良い刺激になりました。

マーケットに山ほどあるアプリの中から選んでもらえるものを作れるように
デザインももちろんですが技術の理解も深めていきたいと思いました。

ブログプチリニューアル

さて、ハレノヒブログのリニューアルから早くも約1ヶ月が経ちました。
実装された時は嬉しいだけだったんですが、自分たちで実際に使ってみると改善点がちらほら。
修正箇所を挙げてどう進めていこうか相談していたところ、ちまちま直していくよりは思い切って作り直そうという結論になりました。

早速デザインの見直しをして、昨日プチリニューアルしました!

今回は、様々な制作会社のブログを観察しながら制作を進めました。
その作業の中で気付いた点をいくつかまとめたいと思います。

他ブログとの比較をして気付いたこと

デザインルールを意識する

リニューアルするにあたって、「デザインルール」をもう少し意識してみました。

ハレノヒブログの場合はヘッダーを水色・背景をうすいグレー・コンテンツは白地に黒文字としています。
そのルールに従って、各サブカテゴリのタイトル部を水色の帯にしたらメリハリがつきました。

また、今まで白だったフッターを濃いめのグレーにしてフッターとしての存在感を出してみました。
さらにそれに従って、記事の下のページングを同色にして同類っぽさを出してます。
濃いめのグレーに黒文字だと印象が重すぎる気がして、文字をグレーにしたところもちょっとしたポイントです。

ゆったりとしたマージン

ブログといえば情報量が多いし、いかにコンパクトに詰め込むかと考えていたのがそもそも間違いでした。
情報量が多いからこそ1つ1つの要素に広めの幅を取ることで、どこを見るべきかが分かりやすくなるんだと思います。
今までほとんど5pxだったmarginやpaddingを部分的に15px〜30pxくらいにしてみたら、窮屈感がなくなって広々と見やすくなりました。

フッターエリアが広い

フッターといえば会社のロゴやリンクやコピーライトを表示するだけの簡潔であまり幅を取らないエリア、というのが今までの認識でした。
でも改めてフッターに注目してみると、工夫する余地は十分あるんだと気付かされました。

今回フッターエリアを縦に3分割して使ってみることに。
会社情報がちょっと豊かになって、名前の文字列だけじゃないものも伝わるような気がします。

ソーシャルボタンの設置位置

これは一覧ではなく記事のページについてです。
前はツイートボタンなどは記事の頭の部分に設置していたんですが、これも良くありませんでした。他のブログでなぜソーシャルボタンを記事の上下に2カ所設置しているのかを改めて考えると、

上部:その記事の人気指数を表して、読みたくさせる
下部:記事を読み終えた後にボタンを押す、という流れをつくる

ということなんじゃないかと思います。

なのでソーシャルボタンを記事の上下に設置してみました。(押していただけるとやる気倍増します)

まとめ

結論からいえばブログはあくまでブログなので、パーツの寄せ集めなんですよね。
個性を出す部分はある程度決まっていたり。

でも色々見ながら作り直してみることで、思い込みで作っていたことに気付かされたりもしました。

まだまだ改良点はありますが、プチリニューアルしたハレノヒブログをよろしくお願いします!

標準
title-2b
Design

一日でゲームデザインをする

こんにちは!新人森田です。

皆様『イケメンばかりにチョコは渡さない』は楽しんでいただけていますか?
今回はゲーム制作の裏話をデザイナーサイドから書いてみたいと思います。
デザイナーサイドとかニヤニヤしちゃう響きです。

ゲームの素材を作る

まずはどんなゲームを作るか、企画会議です。

バレンタイン前々日に山形師匠の発案によりゲーム制作が決まり、色々とアイデアを混ぜ込んでゲームの仕組みを考えました。
…てことは制作期限1日ですか!
使用ツールはPhotoshopでどこまでいけるかやってみます!

世界観づくり

ゲームの企画が固まったら、どんなビジュアルにするかイメージを膨らませます。
登場人物はイケメンと女の子。場所は多分日本。時代はなう。

0214-4

手書きで色々とスケッチしてみました。お色気オネーサマはボツです。

0214-3

スケッチを元にPhotoshopで清書ってほどでもないラフを書きました。

でも今回のゲームはドット絵を使いたいので、本番はこれからです。

ドット絵を作る 1

ドット絵と言われても、にわか知識しかないしちゃんと作るのはこれが初めてです。
期限内に出来上がるのかも怪しいところ。

でもとにかくやらなきゃ始まらない、ということでここからは面白法人カヤックさんのデザイナーブログを参考にしました。

0214-5

まずさきほどのラフを縮小して荒くします。

その上にレイヤーを作って1ピクセルの鉛筆ツールで清書します。
普通に絵を描く感覚でなぞってから、いらないドットを消すという感じで作業しました。
0214-6

ブログ通りにやっただけでもうそれっぽくなってきました。

輪郭線のレイヤーの下に色塗り用のレイヤーを作って色を塗っていきます。
以前どこかで「ドット絵はビビットな色の方がいい」的な情報を見かけたような気がするので、一度色を置いてから彩度を上げました。あと、子供向け戦隊モノみたいに一定の色相を使った方がキャラのイメージが湧くかなと思って、ある程度系統を決めて塗ってみました。

0214-7

青系コーデにピンクのシャツで女子力アッピルです。
ビビットな塗り分けの為、陰は焼き込みカラー、ハイライトはオーバーレイに設定してあります。

見よう見まねでしたが、なんとか出来ちゃいました。
人間やろうと思えば出来るんですね。

ドット絵を作る 2

この子が歩いてくれなければゲームになりません。
先ほどのドット絵とにわか知識を元に動きをつけてみます。

0214-8

こうして大きくすると粗さが目立ちますすみません。

歩くのは足の動きが一番大事ですが、頭の高さや肩の高さ(=チョコの高さ)、髪の揺れを表現すると歩いてる感が出るかなとやってみました。微妙に頬のテカリなども変えてあります。
この辺は昔からのゲーマー気質が功を奏しました。
この調子で他のキャラも1〜2ピクセルずつパーツをずらして動きを作りました。

けど、ゲーム内では動きが速すぎてあんまり分からないというかなしみ。

背景を描く

キャラが出来たら背景を作ります。
背景は師匠の一言で「吊り橋」と決まっていたので吊り橋を描きます。
背景に取りかかった段階でもうあまり時間がなく、というかキャラはまだしも背景なんて全然描いたことがなくて、それでもなんとか間に合わせられないものかと頭をフル回転させました。

背景を描く上で大事なのは、「それっぽさ」を出すことかなと思いました。
そんなにしっかり書き込まなくてもそれっぽさがあれば人が勝手に脳内補完してくれる。はず。

0214-10

まずペン先を平たくした適当な太さのラインを引きます。

0214-9

あとは矢印の通りにざっくざっく描いていったら出来上がり。
木の質感はペン先を平筆にして木目っぽくしています。
ほとんどひたすら縦線を描くだけという突貫工事でごり押しました。

0214-11

一番しっかりしてる背景の雲はフリーのブラシ素材です。
「リアルな雲 ブラシ」あたりのワードで検索すると色んなブラシが出てくると思います。
使うか分からないけど一応DLしておいたのが役に立ちました。

各パーツを作る

その他に作ったものは以下の通りです。

  • タイトル兼スタートボタン
  • 得点の背景パーツ
  • 制限時間の背景パーツ
  • 結果表示の背景パーツ

このあたりはほとんど一発描き…
プログラミングと同時進行で足りないパーツを教えてもらって作る、という連携プレイでなんとか1日で仕上がりました。

ドット絵公開

最後に、作ったドット絵を大公開しちゃいます。
地味に表情とかこだわってたりします。
意外と悲しい顔と嬉しい顔って使い回せることも判明。

girl-blueboy

girl-pink

それぞれ「通常・チョコ渡せた・チョコ渡せなかった」バージョンです。

今回も本当に良い勉強になりました。
これで簡単なゲーム作りはばっちこい!と思いたいです!

『イケメンばかりにチョコは渡さない』

http://www.halenohi.jp/

標準
blog-0123-4b
Design

ブログリニューアルしました!あとレスポンシブデザインについて知るべし

ようこそいらっしゃいました!新人森田です。
なんで書き出しからテンション高めなのかというと、見ての通りです。
とうとうついに!ハレノヒブログリニューアルが実現しましたー!!
私もコーディングはしたものの、実装作業は師匠がマッハで仕上げてくださいました。
ありがとうございますおつかれさまです!

脳内迷宮をぐるぐるしながらようやく出来たデザインが実際に稼働していると、必要以上にスクロール上下したり1分おきくらいにスマホで見たりとか。リュックに眠ってたタブレットも久しぶりに起動させてみたり。

blog-0123-1

ニヤニヤしちゃいます。

ん?手持ちのデバイスフル稼働させて動作確認ということは?
イエス、レスポンシブデザインです。
ワイヤーフレームで書いた通り、どのデバイスで見ても崩れないように作ってあります。

と、いい感じの流れになってきたので今回はレスポンシブデザインについてまとめてみます。

レスポンシブデザインとは

レスポンシブデザイン。最近本屋さんのITコーナーなどでよく見かけるワードです。
「responsive:反応の良い、敏感な」の通り、様々なデバイスに対応したデザインという意味です。
みんなスマホを持ってて、iPadとか持ってるとちょっとイケてたりして(?)、最近MicrosoftがSurfaceごり推しだったりして、インターネットはもうPCのものじゃないってことですね。

で、何がレスポンシブなのかというと、一番は画面の横幅です。
今このページをPCから見てくださっている方、よろしければウインドウの横幅を変えてみてください。ウインドウが最大だったら、縮めていくとあるサイズから一度タブレットサイズにガクッと変わって、更に縮めるとまたガクッとスマホサイズになると思います。
ざっくり言うとこれがレスポンシブな感じです。

パソコン、タブレット、スマホそれぞれの横幅を設定して、各サイズになるとデザインがどう変更されるかをcssに書き込むことでこういった動きが可能になります。

blog-0123-2

たとえばこのブログだとこういう記述です。

レスポンシブにするところ

大体の感じはつかめたと思うので、じゃあ具体的にどの辺をレスポンシブにするか?という話に。

blog-0123-3

ハレノヒブログの場合、PC、タブレットでは右にあったサイドカラムがスマホでは記事の下に回り込んでいます(広告は仮でお借りしてまいりました)。その代わりに横幅いっぱいに記事を表示して見やすくしてあります。ブログなので形式的といえばそうなんですが、分かりやすい例ということで。
他によく見かけるのは、アイコンにメニューが収納されてタップするとメニューリストが出てくる、とかですね。

一般的なサイトの場合だと、例外的かもですが横幅に応じて画面が変化する面白いデザインもあったりします。レスポンシブで遊んでるっていうか。ただコンテンツを整然と表示するだけじゃなくて、そういう遊びがあるとちょっとそのサイト気になっちゃいますよね。

と、ここまでは横幅の変化にどう対応するかを書いてきましたが、もっと突っ込んでいくとレスポンシブデザインってデバイスの操作性と結びついていくと思います。

PCはマウスで画面のポインタを操作するから細かいクリックポイントにも対応しやすいし、キーボードがあるから文字入力も楽々です。
それに対して特にスマホはタップがメイン。お手軽ではありますが、細かいボタンのクリックミスでいらっとした人ってかなりいるんじゃないでしょうか。文字入力も、予測変換機能が充実してきたとはいえ結構めんどくさいですよね。スクロールが多いのも大変。

そういう各デバイスの特徴を考慮した上で、かっこよくて且つ操作もしやすい(さらに楽しいとなおよし!)っていうのが理想的です。あ、あとコーディングの時もあまり手を加えずにレスポンシブに出来るようになってると超ステキですね。いつかそんなサイトを作りたいです、いや、作ります!

なんかアツくなってまいりました。このパッションを忘れずに次のミッションにも取り組もうと思います。
というわけで今回はこの辺にしてハレノヒブログにニヤニヤしにいってきます!押忍!

標準
140110b
Design

UIデザインを知るべし

こんにちは!新人森田です。
1月8日で株式会社ハレノヒは一周年を迎えました。入社のタイミングもあって、忘年会(歓迎会)・年明け・一周年と、最近お祝い続きです。このハレノヒパワーで今日も張り切っていきたいと思います。では師匠、お題をよろしくお願いします!

[山形師匠]
Webデザインが紙と大きく違うところは、紙は情報を受動的に ”見る・読む” のに対し、Webは ”操作する” という動作が加わります。そして操作するためのパーツのことをUI(ユーザーインターフェース)と呼びます。定番はもちろん最新UIの種類や応用方法にアンテナを張っておきましょう。

[森田]
最近Web制作関連の情報を読んでいると「UI」ってワードをよく見かけて、重要そうだなーと思ってました。ストレスなくページを見られるのはしっかりとしたUIがあるからなんですね。どんなものがあるか調べてきます!

Dribbble

dribbble

世界のデザイナー達が作品などを投稿するSNSです。
今まで日本のサイトばかり見ていた私は、かっこいい作品の数々に目からウロコ。色んな国のセンスにリアルタイムで触れられるのは本当にインターネットならではだと思うので、これからものすごくお世話になること間違いなし。

Behance

behance

クリエイター向けポートフォリオサービスです。
めちゃめちゃレベルが高くて、良い刺激にも指針にもなってくれます。早くこの領域に近づきたくてうずうずします。

素晴らしいUIを沢山見ることができて満足していたら、師匠からUIに関する情報を発信しているブログを教えていただきました。

MEMOPATCH

memopatch

 UI制作を専門とする会社が運営するブログです。UIに関する様々な角度からの記事が盛りだくさんで参考になります。

 colisscoliss

Webサイト制作に関するあらゆる情報が豊富に紹介されているブログです。Webは表現だけでなく幅広い知識が必要なんですね。

Hail2u.net

hail2u

Photoshopで作るだけでなく、実際にWebページに組み込むコーディングも含めてUIです。こちらはフロント寄りの情報を取り扱っているブログです。

MOONGIFT

moongift

プログラムのオープンソースを紹介しているブログです。まだ技術的なことまで手が回りませんが、こういったソースも理解できるようになりたいです。

一言にUIといっても、見た目だけじゃなく色んな側面を持っていることがよく分かりました。こういうブログを毎日チェックして勉強しなければ。
次は、実際に使用されているUIはどんなものなのか、ちょっと見てみたいと思います。

Windows Phone

wp

現在のフラットデザインの先駆けといえるWindows Phoneです。Windows Phone 7の発表が2010年ということをふまえると、実は結構前からフラットデザインのUIって使用されていたんですね。

Google

google

2013年春にGoogleのサービスもフラットデザインになりました。
こういうアイコンって、無性に沢山並べてずっと眺めてたくなります。ちなみに森田は最近携帯をNexus5にしたばかりです。

iOS7

ios7

そして2013年6月、フラットデザインを一気に広めたiOS7。
すぐ目に入ってくるし、きれいだしかわいい!やっぱりApple大好きです(iPhoneじゃないけど)。

有名どころを挙げてみましたが、そのブランドのカラーを出しつつ世界中の人々に快適に使われているって凄いことだなと改めて思いました。

言葉を使えば説明はすぐ伝わるけど、それだと長かったり重たかったりする。言葉抜きでユーザーに機能を説明したり、パッと見の美しさもあったりと、UIがWebデザインする上でどういう風に重要かということが前よりも分かった気がします。
流行も反映されやすいし、もっと周囲に目を光らせなければ!と、今回はこの辺りで修行を終えたいと思います。デザインに入るまでの道のりは長いです。押忍!

標準
Design

ワイヤーフレームを書くべし

こんにちは!新人森田です。
本日ハレノヒ周辺は雨模様な予感。
傘を忘れた私は非常にドキドキしております。

今回からこのハレノヒブログを素材として、実際にデザインを進めていく様子もお送りしていきます。森田がこのブログを劇的変身させます!(予定)

[森田]
いよいよデザイン!!どうやってハレノヒっぽくしようかなー

[山形師匠のお言葉]
Webデザインを始める前に、作るものの情報を整理して視覚化したものをワイヤーフレームと言います。サイトの設計図のようなものです。要件を満たし、ユーザーが使いやすいサイトをデザインするために沢山ワイヤーフレームを書きましょう。

[森田]
ふむふむ、デザインの前にワンステップあるんですね。確かに設計図がないととんでもないものを作り出してしまいそうです。ハレノヒブログのワイヤーフレーム、書いてみます!

要素を書き出す

デザインは、ただかっこよさげにレイアウトすればいいというものではありません。伝えたいものを出来るだけ伝えたい通りに伝える為にデザインするんだと思っています。

では、そもそも「伝えたいもの」とは一体何なのか?
まずはレイアウトに必要な要素を書き出してみることにします。

140108-01

  • サイトのタイトル
  • カテゴリーのリスト
  • タグのリスト
  • 記事のリスト
  • ハレノヒサイトへのリンク
  • バナー類
  • 投稿者のリスト
  • 検索フォーム
  • パンくず(TOP>商品カテゴリ>…みたいなやつです)

上記のように、ハレノヒブログを構成する要素は計9個でした。

構成を考える

次に、書き出した要素を配置して全体の構成を考えます。ですがその前に重要なポイントがひとつあります。
「webページを閲覧するのはパソコンだけではない」ということです。

スマホ・タブレットを持っていることは2014年の今、もう普通のことになってきました。しかもそれらの方がパソコンより断然お手軽です。電車内でスマホやタブレットをいじって時間をつぶす人の多さを見ていると、これからモバイル端末のアクセスが増えていくことを予感させます。というか今まさにしてますねきっと。

そういうわけで、スマホ・タブレット・パソコンのどれからアクセスしても見やすいサイトを目指していきたいと思います。
そしてこういう仕組みのデザインを「レスポンシブデザイン」といいます。ちなみに師匠からの受け売りです。

とはいえ全部を同時進行で考えられる頭は私にはありません。
スマホ版から発展させる「モバイルファースト」というやりかたもありますが、ここではパソコンベースのオーソドックスなレイアウトから、他の端末へのアレンジを考えてみます。

140108-04

横幅が小さくなった時にどうなるかも検証して、横に表示されていたカラムを下にしたりと見やすい工夫を。

ブログの大体の枠組みが見えてきました!
ワイヤーフレームによってイメージの共有や指示がしやすくなりそうです。チームでもの作りをする上では必需品ですね。

さあハレノヒブログの設計図が出来ました。次はいよいよデザインか?!どこから手を付けよう??!と期待に胸を膨らませながら今回の修行はここまでです。押忍!

標準