2016.12.04
Webサイト構築、特にレスポンシブWebサイトを作るときにBootstrapを使うというのが、選択肢の一つとして出てくることが多いですよね。BootstrapはTwitter社が開発したCSSフレームワークで、効率的にレスポンシブなWebサイトのコードを書くことができます。またデザインテンプレートが購入できるマーケットプレースも増えてきて、ささっとWebサイトを作ろうと思ったときには、とても便利だと思います。 しかし、Bootstrapで気になるところを上げるとしたら、jQueryに依存しているという点があります。 jQueryは、代表的なJavaScriptのフレームワークの一つです。便利で効率良くJavaScriptを取り入れることができるのが魅力ですが、jQueryはWebサイトの表
つづきを読む
2016.11.20
CSS3 の Values and Units モジュールという、CSSのプロパティに設定できる値や単位を定義している仕様の中から、以前に「calc()」を紹介したことがあります。今回は、「vw」と「vh」の紹介をしていきたいと思います。 ビューポートユニットとは？ 「vw」と「vh」は、CSS Values and Units モジュールの中のViewport Units という項で紹介されています。ビューポートは、Webサイトを表示しているブラウザの表示領域のことを意味します。つまり、ビューポートユニットというのは、ブラウザの表示領域に対して、どのくらいの幅または高さにしたいか、ということを指定することができるものです。レスポンシブWebデザインが当然となっている現在ですが、％指定をし
つづきを読む
2016.09.11
CSS3 の Values and Units モジュールという、CSSのプロパティに設定できる値や単位を定義しているドキュメントの中に「calc()」という関数があります。Values and Units モジュールは、2015年6月11日に勧告候補となっている仕様書ですが、この calc() はすでに多くのブラウザが対応しています。こんなことしたかった！というのが、calc() によって実現できるかもしれません。 calc() ができること calc() 関数は、ひとことで言うとプロパティに設定する値を数式で計算することができるものです。「ボックスの高さを100%にしたいけど、その高さからヘッダーやフッターのピクセル(px)分だけ除きたい」なんて考えたことはありませんか。そういう様々な
つづきを読む
2016.07.25
> ポケット付メモ帳のブランド、「ロルバーン」が15周年を迎え、RWD（レスポンシブWebデザイン）の特設サイト「Rollbahn 15th Anniversary」を公開しています。 メモ帳の表紙がビビッドカラーで、豊富な色の中から好みの色が選べるところがロルバーンの個性的なところでもあるのですが、この特設サイトでは、そんな表紙の色がどうやって生まれているのか、その製造現場のレポートで知ることもできます。 無機質で巨大な機会から、見慣れたロルバーンのクリーム色の紙が裁断されていく様子をみるのは圧巻。 また、さまざまな職業の方が使う、「マイロルバーン」のページもとっても楽しく見ることができます。 レスポンシブWebデザイン、そして、特設サイトのコンテンツを考える上で、たくさん参考になる
つづきを読む
2016.07.16
夏ですね！ そろそろ旅行の計画を立て始めた方も多いのではないでしょうか？ ちなみに、スマートフォンを利用した旅行商品の予約や購入は2年連続で増加しています。 JTB総合研究所の調査によると、2015年には旅行商品の予約・購入をスマホで行った人の割合は、全体においては 32.6% 。 性年代別で最も多かった29 歳以下と 30 代女性では、 47.6%と過半数を超える方々に利用されていることが分かりました。 JTB総合研究所「スマートフォンの利用と旅行消費に関する調査（2015）」 これは、旅行予約のスタンダードがスマートフォンに移りつつある、と言える結果かと思います。 というわけで、今日はスマートフォンで閲覧できるレスポンシブWebデザイン（RWD）の旅行関連サイトのうち、夏らしいデザイン
つづきを読む
2016.07.07
今日は、「Honda×STRIDER」の特設Webページをご紹介します。 自転車に乗れるようになる前に子供が乗るものといえば、ちょっと前までは三輪車が常識でしたが、最近のちびっこたちは、ストライダーに乗っている子がとっても多いのです。 一言でいうと、ストライダーは2歳から楽しめる、ペダルの無い自転車です。 自分の足と全身を使ってバランスを取り、大地を蹴ることで前進する乗り物です。ブレーキもないので、止まるときもバランス感覚と全身を使う必要があります。 そのため、自転車に乗るときに必要な能力と感覚が幼いうちから養え、適齢期になった際に少ない練習ですぐに普通の自転車が乗れるようになる、というのも魅力です。 この特設Webページは、そんなストライダーがホンダとコラボレーションした特別モデルのため
つづきを読む
2016.06.21
アクセスするたびに新しい発見があったり、毎日更新されていると、Webサイトへの訪問も楽しみになりますよね。 今日ご紹介するWebサイトは、茅乃舎だしで全国的に注目を集めている茅乃舎のブランドサイトです。 トップページにアクセスすると、日めくりカレンダーのように日付とそれにあわせた画像が登場。 なんと、画像も毎日変わるのです。 四季の風景とその時期ならではの旬の食べ物の美しい画像に、きゅんときます。 クオリティの高い写真を使って全体的に美しく見せること、これは、小手先のデザインや加工では絶対に出せないパワーを持っています。 トップページからスクロールしたときにメインメニューが出てくるエフェクトも、とっても印象的。毎日画像を見にアクセスしたくなる、そんなサイトです。 写真が得意な方、美しい画像
つづきを読む
2016.05.31
紙の上を鉛筆が走る音には、懐かしさや温かさを感じる、と思うのは私だけではないと思います。 今日ご紹介する「MD PAPER PRODUCTS」は、そんな紙の上を鉛筆が走る音が堪能できるRWD（レスポンシブWebデザイン）のプロダクトサイトです。 「MD PAPER PRODUCTS」という商品が、紙そのものの魅力を活かし、書くことにこだわっているということで、Webサイトのデザインも、使われている写真も、文字の配置も、とことんシンプルに構成されています。 また、最近のWebサイトでよく使われているスクロールエフェクトを活用していますが、スクロールしたときに画像がだんだんと表示されるようなシンプルなアニメーションで、画像の美しさを際立てるのに効果を発揮しています。 そして、一番の見どころは、
つづきを読む
2016.05.25
美味しいものを食べたい、いいお店に行きたい！と思ってお店探しをしているときに、Webサイトのデザインがとても素敵だったら、それだけで期待度がぐぐぐっとアップしますよね。 今日は、福島県郡山市を本社として飲食業を営む「株式会社ファミリア | FAMILIAR.inc」のオシャレなコーポレートサイトをご紹介します。 このサイトは、アクセスして最初に表示される画面いっぱいのお料理とお店の画像がとても印象的です。もちろん画像だけではなく、スクロールエフェクトを効果的に使ったレスポンシブWebデザイン（以下 RWD）のサイトなので、シンプルながらも、印象に残るサイトに仕上がっています。 最近では、JavaScriptとCSSで作成するスクロールエフェクトやアニメーションは、特別な技術ではなく、Web
つづきを読む
2016.04.22
最近のGoogleの公式コンテンツ（レスポンシブ対応になっているもの）を見ていると、デザインが徹底した「モバイルファースト」なんだなと感じます。 「モバイルファースト」というのは、Web制作時に、スマートフォンなどのモバイルサイトを中心にコンテンツを考え、その後にPCなど他のデバイスへと対応させていく考え方のことです。 従来のWebデザインでは、PCで表示した場合のデザインをまず最初に考えて作ってきましたが、スマートフォンが普及した今、「モバイルファースト」でサイト制作を作る、という流れがWeb制作業界の中でも徐々に浸透をしてきています。 スマートフォンでインターネットをするユーザーはPCの約2倍！？ 視聴行動分析サービスを提供するニールセンによると、ほぼ毎日インターネットを利用する人のう
つづきを読む
2016.02.23
高機能＆リーズナブルなオリジナルスノーボードウェアやレイングッズ等を製作・販売する43degreesのオフィシャルサイトが、あまりにも格好良かったので本日はこのサイトをご紹介します。 このサイトでは、マウススクロールもしくはスワイプに合わせてアニメーションと共にサイトの構成が変化するように作られていて、その変化の後に加工された写真とメッセージが表示されるようになっています。 使っている技術は、CSS3 / Fluid Grid / Fluid Image / HTML5 / jQuery / Media Queries / Web Fontなどなど。 レスポンシブWebデザインの対応をすために、「フルードグリッド（Fluid Grid）」「フルードイメージ（Fluid Image）」「メデ
つづきを読む
2016.02.19
「Theme Cards」はレスポンシブ対応のテンプレートばかりを集めたサイトです。 レスポンシブ対応とは、Webサイトが表示された機器（デバイス）の種類やサイズに応じて、表示内容が最適な状態に変化するように対応していることを言います。 このブログでも今までに何回か取り上げてきましたが、昨今ではスマートフォンやタブレット端末のユーザーの増加等にともない、レスポンシブ対応したサイト（レスポンシブデザイン/レスポンシブWebデザイン/RWD）の制作ニーズはどんどん高まっています。 しかし、レスポンシブ対応したサイトを作るとなると、結構大変ですよね。 そんな時、便利なのがテンプレートを使用することです。 特に、WordPressのテーマでレスポンシブ対応したものがあると、サイト制作や更新がとても
つづきを読む
2016.01.08
今回は、RWD（レスポンシブウェブデザイン）に関する分析レポートです。 レスポンシブ対応をしているWebサイトを作るには、知識があればなんとか形にすることはできますが、ベストプラクティスにたどり着くのはなかなか難しいもの。 そういうときに大事なのは、成功事例の徹底的な分析です。 そこで今回は、いまやUIデザインの代名詞とも言える、Apple社のWebサイトを研究してみました！ Apple公式Webサイトhttp://www.apple.com/ まず目を引くのは、ファーストビューにどんと置かれているヒーローイメージ（いわゆるアイキャッチ画像）ですね。 それと同時に、コントラストがはっきりした濃いグレーのグローバルナビゲーションにも目がいきます。 これをモバイルで見るとどうなるでしょうか。
つづきを読む
2015.12.10
今回は上級者向けのお話で、RWD（レスポンシブWebデザイン）の肝とも言える「デバイス・ピクセル比」についてご紹介します。 デバイス・ピクセル比とは、1ピクセルの画像データをディスプレイが何ピクセルで表現するかを表す数値のことです。 今までは、1ピクセルの画像を1ピクセル分のディスプレイで表現するのが当たり前でしたね。 どういうことか順を追ってご紹介します。 まず背景としては、昨今のモバイル・スクリーンの高解像度化競争により、かつて72 ppi（1インチあたり72個のピクセルで表現すること）が最適と呼ばれた時代が、いまや400 ppi以上のスクリーンも市場に見られるようになってきました。 そうなると、これまで72 ppiを基準として作っていたWebサイトやコーディング・ルールも、すべて変え
つづきを読む
2015.08.25
インターネット･アカデミーは、8月26日(水)に「スマホ対応でまわりと差をつけよう！レスポンシブWebデザインセミナー」を開催します！ このセミナーでは、Webサイトのスマホ対応ってどうしたらいいの？という方を対象に、そのデザイン手法である「レスポンシブWebデザイン」をご紹介致します。 本セミナーの見どころ ユーザーがどんどん増えているスマートフォンやタブレット端末。 それらに対応するレスポンシブなWebサイトを作るにはどうすればいいのか、基礎からご紹介致します。 レスポンシブ対応は、決して一過性の流行のものではなく、今後Webデザイナーやクリエイターにとって、必携のスキルとなるものです。 本セミナーでは簡単な実技演習も内容に含まれているので、これからのWebサイト制作に活かしたいという
つづきを読む
