【追記あり】【初心者】デザインってなんだ？「デザイン」の概念と、４つの基本原則を知ろう | WP-E (仮)
みなさんこんにちは！無事大学の卒業が確定して一安心のmegです。今回は初心者向けの記事としてデザインの基本についてまとめてみました。デザインに興味はあるけれど何を勉強すればよいのか分からない方、これからデザインについて学ぼうと思っている方の参考になれば幸いです♪ 目次 デザインとは何か 「デザイン」という言葉の意味 ソール・バスとスティーブ・ジョブズの言葉 デザインの４つの基本原則を知る ‐『ノンデザイナーズ・デザインブック』より 近接 整列 反復 コントラスト まとめ – 【2014年3月9日18時27分「概念とテクニックは繋がっている」を追記しました】 １、デザインとは何か １－１、「デザイン」という言葉の意味 皆さんは「デザイン」と聞くとどんなことをイメージしますか？オシャレなこと？洗練されていること？私たちはなんとなく見た目が美しいことや、ぱっと目を引くものなどを想像しがちですが、
このテーマを使ってみたい！2013年 WordPress公式ディレクトリに掲載されたおすすめテーマ
このテーマを使ってみたい！2013年 WordPress公式ディレクトリに掲載されたおすすめテーマ 2013.12.16 | WordPress WP-Dネイビーこと鳥山です。ちょうど年始より参加したものの気がつくともう年末、半年ほどさぼってしまったので少しでもアウトプットしておかねば。どうか悪あがきと言わないでください。 本業でWordPressに触れる機会が少ないながらも、WordCampやWordBenchでお会いした方々に刺激をいただき、今年は公式ディレクトリに2つのテーマを登録しました。最近の傾向ではレスポンシブはもちろんフラットだったりグリッドだったり、2013年に公式ディレクトリに掲載されたなかから私が気に入ったものをピックアップします。 Hueman グリッドレイアウトの3カラムテーマをベースにしながら、ページごとにレイアウトをカスタマイズできたり、どのページでどのウィジェ
2013年 : 無料で使えるクオリティの高いWordPressテーマ 100 « nanomal
Warning: Use of undefined constant more_link_shrarp_remove - assumed 'more_link_shrarp_remove' (this will throw an Error in a future version of PHP) in /home/users/1/limeline/web/nnmal/wp-content/plugins/more_link_sharp_remove/more_link_sharp_remove.php on line 16 Warning: Use of undefined constant ddsg_language - assumed 'ddsg_language' (this will throw an Error in a future version of PHP) in /ho
[JS]レスポンシブ対応のシンプルながら高性能なすごいナビゲーション！ -Resposive Nav
jQueryなどに依存せず単体で動作し、スクリプトがオフでも機能し、実装も非常にシンプルで、デスクトップやタブレット・スマフォそれぞれで最適な状態で表示し、IE6にさえ対応し、しかも超軽量のスクリプトを紹介します。 シンプルで、セマンティックなマークアップ 1.8KBの超軽量スクリプト 外部ライブラリは不要 CSS3アニメーションを使った美しいエフェクト タッチイベントをサポート クリックとタップの違いを調整 スクリプトがオフでも機能 MITライセンス 対応ブラウザ IE6をはじめ、デスクトップ・タブレット・スマフォの主要なブラウザ全て。 以下は、テスト済みのプラットフォームです。 iOS 4.2.1+ Android 1.6+ Windows Phone 7.5+ Blackberry 7.0+ Blackberry Tablet 2.0+ Kindle 3.3+ Maemo 5.0+
あなたのデザインの自由度を邪魔しない、軽量なグリッドデザインフレームワーク·PocketGrid MOONGIFT
PocketGridは0.5KBの小さなCSSフレームワークです。レスポンシブWebデザインのベースにどうぞ。 Bootstrapをはじめ多様なデザインフレームワークが出回っていますが、デザインの可能範囲が狭まってしまうのを嫌がる声もあります。そこでほんの基礎部分だけを提供してくれるグリッドデザインテンプレート、PocketGridを使ってみましょう。 サンプルです。左が30%、右が70%のコンテンツです。 幅を狭めても比率を維持しています。 よくある三層のWeb構造です。 このように組み変わります。 比率を維持させることもできます。 より複雑な表示です。 レスポンシブに並びが変わっています。 維持させることもできます。 元がこれで… 隙間をなくす設定も可能です。 PocketGridはピュアなCSSだけで作られています。レスポンシブだけでなくセマンティックにも対応しています。メディアクエ
一個覚えとくと重宝するかも！レスポンシブWEBデザイン対応のグリッドシステム色々！ | バンクーバーのうぇぶ屋
先日、Responsive Grid Systemの仕様変更について記事を書かせて頂きましたが、あの反応としてやっぱりいくつかコメントもらったのが、逆に分かりにくくなったという物。 まぁ、従来の作り方とは大分変わったので、グリッドシステムとして僕の中で大事な要素の一つである『周りとの共有しやすさ』という面ではちょっと難ありかなと思うのが正直な所。一度慣れてしまえばこんな効率の良い作り方も中々無いかなと思う反面、やはり直ぐに順応するのは微妙に難しいかなとも思うわけです。 そんな経緯もあって、先日から今まで以上に他のグリッドシステムも目を通すようにしていて、今は個人ベースのプロジェクトとか小規模な物であればResponsive Grid Systemで良い物の、他の選択肢も一応用意しといた方がいいかなと思っている今日このごろです。 というわけで、今日はそんな感じでこれまでいくつか目を通して来た
レスポンシブ用に3案必要？ クライアントとロス無く進める便利ツール -Style Tiles
Style Tilesはウェブサイトを制作する際、そのブランドの本質を伝えるフォント、カラー、エレメントなどをクライアントと打ち合わせをして、ビジュアルのコンセプトを決めるツールです。 レスポンシブデザイン用に3つのモックアップが必要ですか？ このツールを利用することでそういったことはなくなります。 Style Tiles 下記は各ポイントを意訳したものです。 Style Tilesとは Style Tilesの使い方 レスポンシブデザインとSytle Tiles Style Tilesとは Style Tilesはレイアウトを明確せずに、実際のインターフェイスのエレメントを検証し策定します。クライアントとブランドについて確立し、それをウェブに落とし込んでいきます。 Style Tilesを使うタイミングは、ムードボードでクライアントからヒアリングを行った後がよいでしょう。 Style T
CSScience - CSS3 Responsive Slider / Carousel Using Radio Buttons
Important: If you want to resize the window manually, leave at desktop resolution. Or you can just click an icon. Select catcher Responsive CSS3 Slider Created by Ian Hansson (@teapoted) Art from Brendan Zabarauskas (@bjzaba_). Icons from the iconSweets set. Browser Support: Best In Test: Firefox (transition performance) Full Support: Chrome, Firefox, Opera, Safari (latest versions of all browse
ブラウザサイズに応じてsrcやwidthを置き換えてくれるjQueryプラグイン「Responsive Img」:phpspot開発日誌
ブラウザサイズに応じてsrcやwidthを置き換えてくれるjQueryプラグイン「Responsive Img」 2012年11月22日- Responsive Img - a jQuery Plugin for Responsive Images ブラウザサイズに応じてsrcやwidthを置き換えてくれるjQueryプラグイン「Responsive Img」 単に画像をリサイズするだけではなくsrcも置き換えてくれるそう。 PC版を単に縮小するのではなくて、スマホでは別の画像を使う、といった場合にも使えそうですね ブラウザサイズに応じて別の画像に切り替えて最適化したいという場合はそれなりにあると思うので、覚えておいてもよさそうですね 関連エントリ WEBデザインする人なら入れておきたいレスポンシブWEBサイト作成に役立つブックマークレット「Viewport Resizer」 レスポンシブ
たった１行で完成？凄まじくレスポンシブデザインなサイトの作り方 | DECONCEPTER
簡単に作れる！みんな大好き可変グリッド 先日話題になっていた「なんだこれ！！「NHKスタジオパーク」のレスポンシブ・ウェブデザインが凄まじくレスポンシブ！！」で紹介されていたNHKスタジオパークのレスポンシブデザイン。 こちらのサイト、プラグインを使ってとてもシンプルに作られています。キレイ。このシンプルさを伝えたくてうずうずしてきました。せっかくうずうずしたのでどんな作り方をしているのかサンプルを交えて紹介します。 まずはこちらのデモを御覧ください。 凄まじくレスポンシブデザインなサイトデモ 使われているのはjQuery Masonryというプラグインだ！ @planetofgoriさんのブログで紹介されているように、jQuery Masonryというプラグインが使われています。このプラグインたった数行でNHKのサイトのような可変グリッドレイアウトが作れてしまいます。可変グリッドのレイア
[CSS]高性能すぎてビックリしました、レスポンシブデザイン用の超軽量フレームワーク -Kube Framework
[CSS]高性能すぎてビックリしました、レスポンシブデザイン用の超軽量フレームワーク -Kube Framework
レスポンシブとか、そういうことの前に
レスポンシブWebデザインに関する話題を見渡すと、そこまで気にして実装を踏みとどまる必要ってあるのかな？と思うことがあります。 もちろん、レスポンシブWebデザインがパーフェクトなソリューションではありません。しかし、Webにおいてパーフェクトなソリューションが存在するのでしょうか。簡単に作れるツールがないから。古いブラウザへの対応が困難だから。レスポンシブに画像を対応するための最適な方法がないから。実装をしないための理由はいくらでも作ることができますが、実装しない理由は、スマートフォン専用サイトを作ることでも、CSSレイアウトにすることでも、たくさん並べることができます。 Webは完璧な世界ではありません。そして、完璧な世界が訪れることを期待してはいけない場でもあります。予測不可能な世界であり、すぐに新しいものスタンダードになる世界。不完全でありながらも、進化を繰り返すのが Web です
1
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
肉球がパララックスしてレスポンシブ対応のちょっと面白そうなフレームワーク -Cool Kitten
最近のWeb制作でよく使う便利なブックマークレット
Camera | a free jQuery slideshow by Pixedelic