2016.12.24
Webサイトがビジネスにとって欠かせないものとなった現代。 2017年に向けて、見た目が良く印象に残り、しかもユーザーにとって使い勝手の良いWebデザインを考える際には、どんなポイントを踏まえた方がよいのでしょうか？ 今回は、 2017年に考えるべきWebデザインのポイントについてご紹介します。 2017年、Webデザインを考えるポイント 【1】モバイルフレンドリーかどうか？ スマートフォンの普及により、PCではなくモバイル端末でWebサイトを閲覧するユーザーが急増しています。その一方で、まだまだ、PCのみでの閲覧を想定して作っているWebサイトも少なくありません。 PC・モバイル端末双方で負担なく閲覧でき、レイアウトや使いやすさを損ねないレスポンシブなWebデザインが今後、より一層求めら
つづきを読む
2016.12.17
Twitter社が作った有名なCSSフレームワーク、「Bootstrap」。Bootstrap3を使ってサイトを作成している方も多いと思います。Bootstrap3から最新版であるBootstrap4に移行する際は、いくつか大きな変更点がありますので、事前にポイントを踏まえてから移行作業を行いましょう。 インストール方法とオプション インストールの方法は二種類あります。 Bootstrap4の公式サイトからzipファイルをダウンロード パッケージマネージャーを使ってインストール Bower、 NPM、 Meteor、 Composerの四種類のパッケージマネージャーでインストールが可能です。パッケージマネージャーでインストールする場合は、日本語リファレンスの「パッケージマネージャー」の項を
つづきを読む
2016.12.03
食べ物やスイーツのサイトには、「美味しく魅せる」工夫が施されたこだわりのWebデザインのサイトが多くあります。 今日は、そんなサイトを6つご紹介します♪ Webサイト制作やデザインの参考にしてみてくださいね！ 1. おやつのアトリエmoco おやつのアトリエmoco 「からだに優しいほっこりおやつ」をモットーに、卵、バターや乳製品などの動物性食材、精製された白砂糖、一部のお菓子は小麦粉も不使用（グルテンフリー）なスイーツを取り揃えているお店です。卵や乳のアレルギーをお持ちの方、妊娠中や授乳中など食生活に気をつかう女性、血糖が気になる方をはじめ、多くの方に安心して食べていただける商品ばかりだからこそ、材料の魅力、安心安全が伝わるデザインになっています。可愛くておいしそう！と思わせる工夫が溢れ
つづきを読む
2016.11.07
こんにちは。インターネットアカデミーの鹿野です。 先日、当ブログでも紹介させていただきました、インターネットアカデミー卒業生の安村さんとお食事に行ったときのお話をさせていただこうと思います。 安村さんについては前回のブログでも書きましたが、インターネット・アカデミーを卒業後、独立されWebの制作会社を運営されております。 安村さんとはよくお仕事のことで卒業後もお会いしてお話を聞かせて頂いているのですが、その際にこんな話をされてました。 「レスポンシブWebデザインの授業受けとけば良かった」 レスポンシブWebデザインとは複数のデバイスの画面表示を1つのHTMLで完結させる手法です。わかりやすく言いますと、WebサイトをPCの画面にもスマホの画面にも対応できるデザインのことを言います。 当時
つづきを読む
2016.10.25
インターネット・アカデミーでは、2016年11月25日(金)より、Bootstrap基礎講座を特別講座として開講します。 本講座は、レスポンシブなWebコンテンツを作成するためのフレームワークとして人気の「Bootstrap」について、短時間で学ぶことができます。 Bootstrapとは Bootstrapは、Twitter社が開発したCSSのフレームワークです。あらかじめ用意されているCSSの設定を使うことで、素早く、そして簡単にCSSでWebサイト制作を進めることができます。 また、レスポンシブWebデザインにも対応しているため、Webサイトのマルチデバイス対応をする際の開発スピードを高められる点も魅力のひとつです。 その他にも、次のような魅力があります。 導入が初心者にも簡単にできる
つづきを読む
2016.09.11
CSS3 の Values and Units モジュールという、CSSのプロパティに設定できる値や単位を定義しているドキュメントの中に「calc()」という関数があります。Values and Units モジュールは、2015年6月11日に勧告候補となっている仕様書ですが、この calc() はすでに多くのブラウザが対応しています。こんなことしたかった！というのが、calc() によって実現できるかもしれません。 calc() ができること calc() 関数は、ひとことで言うとプロパティに設定する値を数式で計算することができるものです。「ボックスの高さを100%にしたいけど、その高さからヘッダーやフッターのピクセル(px)分だけ除きたい」なんて考えたことはありませんか。そういう様々な
つづきを読む
2016.08.25
日本におけるスマートフォンの利用者数は5,000万人を超え、年々利用平均時間も高まっています。そんな状況だからこそ、WordPressで作ったサイトも、PCだけでなくスマートフォンでも閲覧できるようにしておきたいですよね。 本日は、WordPressをスマートフォンに対応させ、端末を問わずに訪問してもらえるWebサイトにしましょう。 今や、ブログ作成にはスマートフォン対応が必須 スマートフォンの普及に伴い、モバイル端末からの検索やWebサイトへのアクセスが増えています。 世界は今「モバイルファースト」の時代です。モバイルファーストとは、パソコンよりもモバイル機器向けのコンテンツを優先する動きを指す言葉です。 また、Googleは2014年に「The Mobile First World」と
つづきを読む
2016.07.29
インターネット・アカデミーの「Web制作実践プロジェクト」から、新しい作品が完成しました。 兵庫県高砂市にある、「ファーマーズ・キッチン イヌイット」というレストランのWebサイトです。 Web制作実践プロジェクトとは インターネット・アカデミーでは、企業からWebの制作案件を請け負い、受講生がチームを組んでWebサイト制作をするプロジェクトを行っています。 制作会社と同じように、Webプロデューサーを中心に据え、Webディレクター、Webデザイナー、コーダーなどの役割をチーム内で分担し、定められた期間内にWebサイト制作を行います。 完成したWebサイトは実際に公開されるため、現場同様の緊張感で実務経験を積んでいただくことができ、就職活動の際には実務経験としてアピールすることができます。
つづきを読む
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.26
7/1(金)に、BOHRのイベントとして、「Webサイトのリニューアルとレスポンシブ化を考える!ディレクターズトーク & BOHR交流会」を開催します！ 本イベントは、制作会社の現役Webディレクターから、Webサイトのレスポンシブ化についてノウハウを聞くことができるセミナーと、インストラクターや受講生・卒業生と語り合える交流会がセットのイベントになっています。 イベントの見どころ Webサイトのスマートフォン対応は、SEOにおいてもユーザー数においても、年々重要度が増してきています。 だからこそ、突然「今使っているサイトをスマホで表示できるように、レスポンシブ化したい！」という依頼が舞い込むことも日常茶飯事です。 そんな時、どのようにプロジェクトを進めていけば良いのか、実際に制作
つづきを読む
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.05.18
アイスクリームやジェラートが美味しく感じる季節になってきました。 今日は、そんな今の時期にぴったり！？な、アメリカのジェラート屋さんの可愛いWebデザインのサイトをご紹介します。 「Sweet Magnolia Gelato Co.」は、アメリカのミシシッピ州を中心に他店舗展開しているジェラート屋さんです。 イラストとアニメーションが効果的に用いられた、レスポンシブWebデザインのオシャレなサイトです。 見所は細部にいたるまで統一されたデザインと、「OUR STORY」のコンテンツのアニメーション。創業者のHughさん、もともとはアートのお仕事をされていたというのがとても納得がいくデザインクオリティです。 また、以前ブログでご紹介したオースティンを中心に販売されているというSway Wat
つづきを読む
2016.04.25
新緑も深まり、いよいよ春が過ぎ夏の気配を感じる今日この頃。 今日は、そんな今の時期にぴったりのさわやかなWebデザインのサイトをご紹介します。 アメリカのオースティンを中心に販売されている有機フルーツ水「Sway Water」のサイトは、レスポンシブWebデザインで作られたオシャレなサイトです。 マウススクロールにあわせて画像を動かし、奥行きや遠近感を表現したりする手法をスクロールエフェクトといいます。 そんなスクロールエフェクトと、パステルカラーの配色がとってもマッチしてますよね。 Googleマップのマーカーもサイトのデザインにあわせてカスタマイズされているのも、細部までこだわりを感じられていいですよね。 （マーカーの変更をしたい！という方は、インターネット・アカデミーのホームページ制
つづきを読む
2016.04.22
最近のGoogleの公式コンテンツ（レスポンシブ対応になっているもの）を見ていると、デザインが徹底した「モバイルファースト」なんだなと感じます。 「モバイルファースト」というのは、Web制作時に、スマートフォンなどのモバイルサイトを中心にコンテンツを考え、その後にPCなど他のデバイスへと対応させていく考え方のことです。 従来のWebデザインでは、PCで表示した場合のデザインをまず最初に考えて作ってきましたが、スマートフォンが普及した今、「モバイルファースト」でサイト制作を作る、という流れがWeb制作業界の中でも徐々に浸透をしてきています。 スマートフォンでインターネットをするユーザーはPCの約2倍！？ 視聴行動分析サービスを提供するニールセンによると、ほぼ毎日インターネットを利用する人のう
つづきを読む
2016.04.10
4月6日に、W3Cブログで「Working on HTML5.1」という記事が公開されていました。HTML5が2014年の10月に勧告されてから約1年半が過ぎていますが、これからHTML5.1の勧告に向けて、どのような作業があるか、どのような目標で取り組んでいくか、といったことが記載されています。 2016年9月に勧告？ ブログの中では、これからのHTML5.1のスケジュールについて触れられていました。W3Cの仕様書が勧告されるまでには、「草案(Working Draft)」→「最終草案(Last Call Working Draft)」→「勧告候補(CR: Candidate Recommendation)」→「勧告案(PR: Proposed Recommendation)」→「W3C
つづきを読む
2016.02.23
高機能＆リーズナブルなオリジナルスノーボードウェアやレイングッズ等を製作・販売する43degreesのオフィシャルサイトが、あまりにも格好良かったので本日はこのサイトをご紹介します。 このサイトでは、マウススクロールもしくはスワイプに合わせてアニメーションと共にサイトの構成が変化するように作られていて、その変化の後に加工された写真とメッセージが表示されるようになっています。 使っている技術は、CSS3 / Fluid Grid / Fluid Image / HTML5 / jQuery / Media Queries / Web Fontなどなど。 レスポンシブWebデザインの対応をすために、「フルードグリッド（Fluid Grid）」「フルードイメージ（Fluid Image）」「メデ
つづきを読む
