Appleも実践！シンプルだけど魅力的なデザインを実現しているホームページ6つの心得
デザインが非常に洗練されていると評判のAppleは、製品だけでなくホームページも驚くほどシンプルです。 シンプルで印象的な見た目は、時に冗長で複雑な説明をするよりも説得力があります。 ただ、単にいくつかの要素を考えもなしに置くだけでは、シンプルなデザインとは言い難いでしょう。 シンプルとは、余計なものをそぎ落とすだけでなく、本当に大切なものを選りすぐっていった先にこそあるからです。 今回は、シンプルだけど魅力的なデザインのホームページを作成する際に気をつけたい7つの心得をご紹介します。 「シンプルかつ、万人に訴求するようなデザイン」は、どのような考えをベースに作成されているのでしょうか。 ポイントごとに詳しく見てみましょう。 シンプルだけど魅力的なデザインのWebサイトの7つの心得 1. 伝えたい大テーマを１つに絞る １ページにつき伝えたい大テーマを１つに絞っていくことは、シンプルなデザイ
ミニマリズムの極み！シンプルすぎるデザインのホームページ17選
「このデザインはシンプルだね」 と言われて、ピンとくる人はどれくらいいるでしょうか。 Appleのホームページのように、シンプルで洗練されたホームページをデザインしたいと思っている人はたくさんいるでしょう。 しかし、いくらワンポイントアドバイス集を見てもなんだかシンプルとはかけ離れていたり、どこかごちゃごちゃしていたりするのは、そもそもシンプルとはいかなるものか、その定義がはっきりしていないからです。 今回は、特にシンプルだと思われる洗練されたデザインのホームページを集めました。 シンプルさを表現したホームページを見て、「シンプルとはどういうことなのか」を突き詰めて考えてみましょう。 ※ホームページのキャプチャは掲載当時のものです。現在のホームページとは異なることがあります。 シンプルすぎるデザインのホームページ 1. Spencer Nelson http://spencenelson.
手軽にパララックス効果を実装できるシンプル・軽量な「simpleParallax」 – bl6.jp
simpleParallaxは、手軽にパララックス効果を画像に実装することができるシンプルで軽量なjQueryプラグインです。複雑な機能などを必要とせず、サクッとパララックス効果を画像に適用したいという人にオススメです。 simpleParallaxの実際のデモ動作は、以下のページからチェックできます。 デモ デモページでは、下へスクロールしていくと画像に視差効果が加えられているのを確認できるかと思います。それほど大げさなものではなく、さりげないパララックスに仕上がっている印象です。 派手さはないものの、シンプルな分いろんなサイトに合わせやすいプラグインといえるのではないでしょうか？ 使い方もかなりシンプルで、手軽に使用できるはず。セッティング可能な項目には、orientationとscaleが用意されています。orientationにはupかdownのいずれかを指定できます。デフォルト値
シンプルかつハイクオリティなデザインを可能にする商用フリーのフラットデザイン素材まとめ「35 Free Flat Graphics and Web Elements for Designers」
シンプルかつハイクオリティなデザインを可能にする商用フリーのフラットデザイン素材まとめ「35 Free Flat Graphics and Web Elements for Designers」 シンプルで機能的なフラットデザインは、場面を選ばずどんなシーンにも合わせやすい優れもの。今やWeb制作には欠かせない、デザイン手法の一つではないでしょうか。今回ご紹介するのは、そんなフラットデザインを手軽に取り入れる事ができる、商用フリーのフラットデザイン素材をまとめた「35 Free Flat Graphics and Web Elements for Designers」です。 Weather – Daily UI #037 – Freebie by Roman Bova – Dribbble 情報をすっきりと分かりやすく見せてくれる、魅力的なフラットデザインが35点もまとめられています。今回
デザインはもっとシンプルに！無駄な要素を削ぎ落としたUIデザイン「コンプレクション・リダクション」とは？
「あれ、いつのまにかデザインが白っぽくシンプルになってきたなぁ」 Facebook MessengerやInstagramなどのスマートフォンアプリの度重なるアップデートの末に、こんなことに気づいたひともいるのではないでしょうか。 デザインは、よりシンプルで、ストレスのかかる要素をそぎ落とす方向へとどんどんと進んでいます。 2012年頃に広まった*「フラットデザイン」を皮切りに、「マテリアルデザイン」や「ミニマルデザイン」、そして「フラットデザイン2.0」や「メトロUI」*と呼ばれるデザインなどのトレンドが次々と流行し、そうしたトレンドを踏まえたホームページやアプリが量産されました。 そして、2017年、果たして次に来るデザイントレンドは一体何なのでしょうか。 その答えが、*「白っぽいデザイン」*に現れています。 今回は、「白っぽいデザイン」の正体である新しいデザイントレンド*「コンプレク
軽量でシンプルで依存性のないカルーセルを実装できる「Siema」 – bl6.jp
Siemaは軽量でシンプル、そしてjQueryなどの依存性のないカルーセルを実装することができるスクリプトです。マークアップ、使い方ともにシンプルなので、手軽にカルーセルを設置したいという人にピッタリです。 Siemaの具体的な使い方や実際のデモ動作は以下のページから見ることができます。チュートリアルの動画も用意されていますよ。 Siema カルーセルのデモでは、prev、nextのボタンが設置されており、ここからアイテムを前後移動させることができます。スライドでサクサク切り替わっていきます。 シンプルがゆえに、いろんなシーンで活用できそうですね。 サポートしているブラウザは、IE 10、Chrome 12、Firefox 16、Opera 15、Safari 4、Android Browser 4.0、iOS Safari 6.0になります。 また、Siemaにはオプションもいくつか用意
軽くてシンプルなLightboxを実装できるスクリプト「Luminous」 – bl6.jp
Luminousを使えば軽くてシンプルなLightboxを実装することができます。指定した画像をクリックすると拡大表示されます。 サクサク動作するのでとても快適ですね。小さいサムネイル画像をカッコよく手軽に拡大表示させたい場合に役立つ機能です。オプションもいろいろ用意されているので、カスタマイズして使いたい方にも最適ですね。 以下からLuminousの実際のデモを確認することができます。 デモ 画像にホバーするとカーソルが矢印から虫眼鏡に切り替わるので、瞬時にクリックで大きな画像を見れるんだな、ということがわかります。 クリックするとスムーズなアニメーションで拡大した画像が表示されます。背景にはグレーのオーバーレイがかかります。そして再度画像をクリックすると元の状態に戻ります。 使い方も非常にシンプルなので、気軽に実装できるのがいいですね。 オプションにはnamespace、sourceA
デザインや使い方がシンプルな「Custom jQuery Lightbox」 – bl6.jp
Custom jQuery Lightboxはデザインや使い方がシンプルで軽量なLightbox系スクリプトです。非常にコンパクトな設計で、余計な機能がないぶんサクサク動作します。さりげないフェードアニメーションもいいですね。 以下からCustom jQuery Lightboxのデモを確認できます。 デモ 画像をクリックすると拡大された画像がフェードで表示されます。画像以外の部分にはオーバーレイがかかります。 画像内の左上にあるバツ印か、画像の外側をクリックすると元の状態に戻ります。 必要最小限の機能になっているので、実装も簡単です。 たくさんの機能を必要とせず、とりあえずサクッと気軽にLightbox的なものを実装したい方は、ぜひチェックしてみてください。 Custom jQuery Lightbox
1
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
シンプルでクリーンなモバイルファーストのCSSフレームワーク・「Outline」
html5-memo.com