Build beautiful, usable products faster. Material Design is an adaptable system—backed by open-source code—that helps teams build high quality digital experiences.
Webデザインは常に進化しており、活気にあふれている世界です。現在のWebデザインの状況を確認しながら、2015年の予測されるトレンドを紹介します。 Webデザイナー・ディレクターだけでなく、Web制作に携わる人は知っておいて損はないキーワードばかりです。 Web Design Trends That Will Rule 2015 下記は各ポイントを意訳したものです。 ※当ブログでの翻訳記事は、元サイト様に許可を得て翻訳しています。 高品質なストックフォト 単色の背景 動画を使った背景 面白いナビゲーション カード・タイル型レイアウト 固定配置のブロック パララックスは繊細に いかにスクロールしてもらえるか 今までとは違うイラストの使い方 ビッグデータ・グラフ プロダクトファースト フラットデザインは成長し続けている モバイルファースト 人間的な温かみのあるデザイン UXのちょっとした工夫
今回は少し触る機会があったのでパララックスを作るときに便利よさげなプラグインをご紹介します。 使用するプラグインは「skrollr.js」 選んだ理由としては… ・軽量 ・スマホでも利用可(スクロールに対応) ・IEも(対応のjsを読みこめば)利用可 ・感覚的に実装できそう ■skrollr.jsを使用したサイト ・http://kataomoi3.com/ ・http://www.larc-en-ciel.com/live2014/ まだ他にもメジャーどころが使ってそうですが。 ■読み込むJS ・jquery(1.9以降?古いと動かないらしいです) ・skrollr.min.js ・skrollr.ie.min.js(IEでも動く用) [プラグインの前に…] とりあえずスクロール量を取得。自分用のメモで書いておきます。 »DEMOを見る //HTML部分 <p id="scrollTxt
jQueryをメインにHTML5やCSS3を使ったリッチな表現のためのテクニックを紹介。まずはパララックスエフェクトの基本から。 Webサイトの55%で利用されているjQuery はじめまして。クラスメソッドのフロントエンドエンジニア、山田です。「jQuery×HTML5×CSS3を真面目に勉強」という連載をスタートします。 2005年2月にGoogle mapsが登場して以来、Web開発者の間でJavaScriptの株は上昇の一途をたどっています。その勢いはとどまることを知らず、リッチなWebコンテンツを作るには、Flashをはじめとしたプラグインに頼るという、それまでの常識をすっかり覆してしまいました。 さらに、HTML5やCSS3も登場し、各ベンダのブラウザがWeb標準の仕様に合わせて実装の足並みを揃え始めるなど、プラグインに頼らずともリッチなUIのWebコンテンツを少ない手間で作れ
pL� �UGamesTop Picks Super Mario Bros. WonderExpect the unexpected!Learn moreNintendo SwitchPikmin 4A new adventure blossoms!Learn moreNintendo SwitchThe Legend of Zelda: Tears of the KingdomExplore the vast land – and skies – of HyruleLearn moreNintendo SwitchAnimal Crossing: New HorizonsLearn moreNintendo SwitchNintendo Switch SportsSwing, kick and spike your way to victory!Learn moreNintendo Sw
もしすごいアイデアを思いついたらどうする? 宝箱に入れて大切に保管してもしょうがない。 実現させないと。 もし実現する方法がなかったら? なかったら創る。 方法論から創り出す。 だって実現しなければクリエイティブじゃない。 それが私たちQの考え。 そしてQ自体がクリエイティブを実現するために、 つくられたひとつの方法論、とも考えます。 才能を集めて自由と 責任を与え、 若さをリスペクトし、 組織の中にも頭の中にも垣根を無くす。 大胆を良しとする。挑戦を良しとする。 そんなクリエイティブ実現力集団こそ、 私たち Q が目指す姿です。 「0」からのプランニングに始まりデザインからモノづくりまで、 各分野のプロフェッショナルが手を組み、 戦略と感性を融合させあらゆる トータル・ソリューションの実現をサポートいたします。 私たちはクリエイティブに領域を決めず、 ボーダーレスに探求しています。
こんにちは。LIGフィリピン支社代表のせいと(@seito_horiguchi)です。 前回、これからSassを始めたい人へ!導入手順をまとめてみた(Dreamweaver対応)というSassの基礎に関する記事を書かせていただきました。 そこで今回は、もう一歩つっこんでもっと使いこなせるようになろう!という趣旨のもと、ちょっと使えるようになったからっていい気になっている僕がSassのテクニックやら関数をまとめてご紹介いたします! たくさんある機能の中から、今回は比較的簡単で実用性の高いものをチョイスしました。 目指せSassマスター!WEBデザイナーもコーダーもすぐに実践したくなるSassの基本テクニック12連発もくじ もくじ テクニック1 アンパサンド(&) テクニック2 演算 テクニック3 round() テクニック4 rgba() テクニック5 コメントアウト テクニック6 変数 テ
非デザイナーエンジニア(Rubyist)の私が、一人でこんなWebアプリを作ってみました。 まだβ版ですが、Pocketやfeedlyの未読コンテンツの中から、 重要度が高いものだけをリマインドしてくれるサービス「Reminderr」です。 Reminderr:http://www.reminderr.me/ 要するに、私自身のPocketとかRSSがカオスになっているので、 その中で重要なものだけ教えてほしかったので、 自分で作っちゃえ!って思って作りました。 そのときに使った便利ツールたちをまとめておいたら便利そうだったので、 今回使ったもの+αを全てまとめてみました。 紹介するツールたちを駆使すれば、 非デザイナー&デザインセンス0の私が、 1週間程度でこれくらいのアプリをリリースできるので、 他のエンジニアにも便利なツールがいっぱいあると思います。 Bootstrap系 Boots
Bucknell Universityのサイトの、型破りなレスポンシブデザインへの変更は話題を呼んだが、それによってユーザビリティがかなり犠牲になっていることが、学生と保護者によるテストで明らかになった。 Breaking Web Design Conventions = Breaking the User Experience by Katie Sherwin on July 20, 2014 日本語版2014年10月6日公開 大学のWebサイトのトップページを頭に思い浮かべてほしいと言われたら、どのようなイメージが浮かぶだろうか。浮かぶのはSUNY Cortlandのトップページのようなもの、つまり、芝生の上に学生がいる画像があって、ページの上部にはナビゲーションがあり、そこにAcademics(:学部・大学院)、Admissions(:入学案内)、Prospective Studen
一年くらい前は、フラットはただのトレンドでしょ、と言われることもありましたが、この一年で日本でも多くのWebサイトで採用されており、一過性のものではなくなりました。これから制作されるサイトの多くでフラットが採用され、またどんどん進化していくことと思います。 そんなフラットの見た目的な美しさだけでなく、実際に改善された事例を元にした効果な使い方を紹介します。 How Flat Design Increases Conversion Rates 下記は各ポイントを意訳したものです。 ※当ブログでの翻訳記事は、元サイト様に許可を得て翻訳しています。� 海外のブロガーから日本の他ブログでの無断転載や無断翻訳を聞くのでご注意ください。削除依頼しても無視っていうからひどい。 ミニマリズムがコンバージョンレートを261%増やした例 コンテンツファーストとモバイルファースト ボタンのデザインを変えたらコン
こだわり抜かれているウェブデザインを多く見ることは想像力を豊かにしてくれると思う。本当にクリエイティブでクオリティの高いサイトを見ると「自分も何かを作りたい!」と創作意欲が強く刺激されることもある。 今回はぼくがここ数年間で見てきたウェブページの中で、創作のモチベーションを高めてくれたものをまとめて紹介しようと思う。 1. AMP MUSIC 最近のお気に入り。アフリカのストリートミュージックを取り扱う音楽レーベル「AMP MUSIC」のウェブサイト。スマホで見ると、アニメーションや音楽の再生がないが、それでも配色や全体のバランスが洗練されている。 2. UNIQLO INTRODUCTION サイトの始まり方から、マウスオーバー時の動きまですべてが群を抜いてカッコイイウェブページ。流れてくる衣服や写真の流れまでこだわり抜かれている。作業用音楽で聞いていたいほど、BGMはリズミカルで心地が
こういの記事を定期的に書いていますが、以前のものは古くなっているので書いてみます。ウェブサイト、ブックマークレット、拡張機能(Chrome)から本当によく使っているものを無理やり数を増やすことなく厳選して紹介します。 実際にウェブサイトを作成する時にお世話になるであろう順番で紹介します。ウェブサイト、ブックマークレット、拡張機能(Chrome)ごとで分けていませんのでご注意ください。 I/O 3000 | Webデザインギャラリー 【ウェブサイト】 ギャラリーサイトって同じサイトが紹介されていることも多いので、あまり色々を見ません。最近はこちらをよく見ます。更新頻度も高く、カテゴリやタグ分けも使いやすくなっています。 とはいうものの、もっと色々見たいというときもあるので、そんなときは以下のサイトもよくみます。どれもきれいで見やすいサイトです。やっぱり無限スクロールがいいですね。 【S5-S
デザインの原則をWebデザインにどのように取り入れるのか、それを言葉に表すのはなかなか難しいことです。デザインの原則を理解して手を動かす、またクライアントにデザインの説明を行うといったこともあるでしょう。 デザインにはなぜそうなるのかという理由があります。 実際のWebページのデザインを元に、デザインで大切な原則とそれらをWebデザインにどのように取り入れるのかを紹介します。 7 Undeniable Design Principles You Can't Ignore 下記は各ポイントを意訳したものです。 ※当ブログでの翻訳記事は、元サイト様に許可を得て翻訳しています。 photoshopvip.netというブログにも同記事の翻訳がありますが、あちらは無断翻訳・画像の使用も無断であると、元記事の作者から連絡を受けています。 使用するデザイン 1. Hierarchy -階層 2. Rep
こんにちは。 開発部エンジニア見習いの渡辺です。 今回はこれから、WordPressでブログ構築してみたいという方はサラッと目を通してみてください。 そんなん「アタリマエダYO!」ということや「普通やん!」という内容もあるかも知れませんが備忘録の一部として残します。 はじめに WordPressとは世界中でたくさんのユーザーが利用しているオープンソースのブログソフトウェアです。 2014年8月現在バージョン3.9.1の配布を行っています。 GPLライセンスの元で無料で利用でき拡張性・カスタマイズ性ともに高く、さまざまなWebサイトで利用されています。 このブログもWordPressを利用しているので構築の際に行ったことを書きたいと思います。 1.最新のWordPressで構築する 最新バージョンに対応していないプラグインなどもありますが、リビルドでなくゼロから構築する場合は極力
2014/08/03 ciotan event どうも!暑すぎて死んだ魚のような顔になってます、塩谷です。 今日は、おなじみ「いい時間」のイベントレポートをさせていただきます! バーグハンバーグバーグの柿次郎さん、LIGのゴウさんが中心となって隔月くらいのペースで開催される、こちらのセミナー。 1回目は教育ビジネス、2回目は広報戦略、3回目は…… 「気持ちを動かすWEBコミュニケーション」 というテーマ。 WEB、という切り口ではありましたが、結果としてはメディア・広告の人にも、アートの人にも、ぜひ知っていただきたい!そんな内容でしたので、気合いを入れてレポートさせていただきます。 今回登壇されたのは、 面白法人カヤックの佐藤ねじさん。言わずと知れたカヤックのエースクリエイター。 そしてもう1人は、tha ltd.の西村斎輝さん。愛称は「ボウズ」さん。 Twitterで長年、ハイクリエイテ
Backjoyを買ってみたらほんとに腰が楽なminamiです。 CSSで要素を上下中央寄せする方法は古くから色々と試されてきました。 今回は海外のサイトで知って目から鱗だった方法をご紹介します。 基本的な設定 上下左右中央寄せしたい要素に以下のCSSを設定します。 position: absolute; top: 0; left: 0; right: 0; bottom: 0; margin: auto; width: 任意の値 height: 任意の値 これだけ。これだけで親要素に対しての上下左右中央寄せを実現できます。 追記: 親要素にはposition: absolute;かposition: relative; を設定してください。body に対してセンター寄せしたい場合はそのままでOKです! 今までtop とleft の値を50%にとって、要素の高さと幅の分だけマイナスのmarg
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
処理を実行中です
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く