【追記あり】【初心者】デザインってなんだ？「デザイン」の概念と、４つの基本原則を知ろう | WP-E (仮)
みなさんこんにちは！無事大学の卒業が確定して一安心のmegです。今回は初心者向けの記事としてデザインの基本についてまとめてみました。デザインに興味はあるけれど何を勉強すればよいのか分からない方、これからデザインについて学ぼうと思っている方の参考になれば幸いです♪ 目次 デザインとは何か 「デザイン」という言葉の意味 ソール・バスとスティーブ・ジョブズの言葉 デザインの４つの基本原則を知る ‐『ノンデザイナーズ・デザインブック』より 近接 整列 反復 コントラスト まとめ – 【2014年3月9日18時27分「概念とテクニックは繋がっている」を追記しました】 １、デザインとは何か １－１、「デザイン」という言葉の意味 皆さんは「デザイン」と聞くとどんなことをイメージしますか？オシャレなこと？洗練されていること？私たちはなんとなく見た目が美しいことや、ぱっと目を引くものなどを想像しがちですが、
[ HUE / 360 ] The Color Scheme Application
Circle Controller HUE/360 Ver.0.1.3 © 2012 SAUCER.JP
Webデザインの配色について学ぶときに読んでおきたい14の記事
このブログをみてお分かりのように、私は思い切った色使いがなかなかできません。どうせセンスがないしと諦めても仕方ないし、恐らくセンスがないのではなく勉強していないだけですし、言い訳はせず勉強することにしました。 ということでWebデザインの配色について学べる記事を集めてみました。 基礎的なものから並べてみましたので、順番に読んでいけば色についての知識は深まると思います。「センスがない」という言い訳をして、実は勉強していなかっただけだということに気付く人もいるかも。 色彩センスのいらない配色講座 基本から分かりやすくまとめられているスライドです。サブタイトルの「色は理論的に説明できる」っていうのがなんかかっこいい。 絶対に覚えておきたいwebデザインの配色・カラー3つの基本と基礎 | 秋田県webデザイナー【weblog】 基本的な内容を親切に分かりやすく説明してくれていますので、これから勉強
配色に悩んだときに、きっと役立つ7つの配色技法【基本】
私は「色」が好きなので、配色を考えるのがそんなに苦ではないんですが、良い配色が思い浮かばず、苦しんでいるWebデザイナーさんは沢山います。 人の目で見分けられる色の数は750万色以上あると言われていて、デザイナーはこの膨大な色の中から配色を考えるんですが、これが結構大変なんです。経験を積んだWebデザイナーさんでも何日も配色に悩み、目の下に隈を作ることがあると聞いたことがあります。 そこで今回は、配色を考える時や、配色に悩みすぎて出口が見えなくなってしまった時に役立つ、基本的な7つの配色技法を紹介したと思います！ 基本的な7つの配色技法 これから紹介するの7つの配色技法は、お互いに明確な違いがない物もいくつかありますが、あくまでもこれらは配色の方向性・配色の考え方を示すものだと理解してください。それでは早速、例を交えながら特徴と効果をまとめて紹介させていただきます。 ドミナントカラー配色
自分のページやサイトが各ブラウザでどのように見えるか確認できる便利なサイトいろいろ - GIGAZINE
サイトのレイアウトを変更したり、新しくデザインする際に使えるのがこのクロスブラウザテスト、要するに「それぞれのOSのそれぞれのブラウザで自サイトは正しく見えているのか？」をチェックするサイトです。予算と時間が潤沢であれば、自分で各種OSを揃え、各種ブラウザを導入してチェックできるのですが、あまりにも非現実的な場合が多いため、この手のテストサイトは非常に重宝します。 というわけで、デザインやレイアウトのチェックに使えるクロスブラウザテストのサイト一覧は以下から。 10 Helpful Resources for Cross Browser Testing Browsershots http://browsershots.org/ 見てのとおり、現時点ではほぼ最強に最も近い定番クロスブラウザテストサイトが「Browsershots」です。Linux・Windows・Mac OS・BSDの各種ブ
テキストエディタでWebサイト構築をガンバル人へ（1/3） ― ＠IT
テキストエディタでWebサイト構築をガンバル人へ：どこまでできる？ 無料ツールでWebサイト作成（6）（1/3 ページ） 「あえて」テキストエディタでWebサイト構築 今回はテキストエディタと組み合わせることで、開発をより便利にできるツールについて考えてみよう。 現在「あえて」テキストエディタでの開発を行われている方には、現在使っているエディタを選択するまでの“経緯”や“こだわり”があると思う。筆者もこれまでにさまざまなテキストエディタを試し、「この程度のもので十分だ」と感じるテキストエディタを現在使っている。 テキストエディタ＋α そこで今回は、テキストエディタ自体とそのプラグイン／拡張機能に関する紹介は行わないこととし、「どのようなテキストエディタを使っている場合でも、組み合わせて使うことでより簡単にWebサイト構築ができるツール」という観点で紹介したいと思う。もちろん、Webオーサリ
アイコン・ファビコンを作成するサイト20 - ネタフル
20 Icon & Graphics Generatorsというエントリーより。 We’ve put together a list of 20 sites that’ll help you create icons, favicons, animations and various graphics in no time. Mashableで、アイコンやfavicon（ファブアイコン・ファビコン）などのグラフィクスを作成することができるサイトが、20サイト紹介されていました。 1. 256 Pixels – a daily favicon design challenge お題に対して、プレビューしながらファビコンを作成するサイト。 2. Ajaxload – Ajax loading gif generator Ajaxがロードされる時のアニメーションするアイコンを作成するサイト。 3
MOONGIFT: » デザイナー必須！オートトレースソフト「Potrace」:オープンソース...
Webに限らず、PC上で画像を作成しようと素材をもらったら、ラスタ画像で渡された経験はないだろうか。またはデジタルデータすらなく、紙でしか素材が存在しないこともある。スキャンして手作業でトレースしていく作業をしていると嫌になってしまう。 それらの苦労から開放してくれるソフトウェアがこれだ。 今回紹介するオープンソース・ソフトウェアはPotrace、オートトレースソフトウェアだ。 Potraceはコマンドラインで動作するソフトウェアで、PBM/PGM/PPMまたはBMPファイルを読み込み、EPSやPS、SVG/PDF/GIMPPATHといった形式に変換してくれる。かなりレベルの高いトレース結果が得られる事に驚くはずだ。 そのまま使ってみてもいいし、微妙な調整は閾値を直すことで行える。対応プラットフォームが数多く、Linux/BSD/Mac OSX/Windows等となっている。Mac OSX
CodeZine：携帯シミュレータ入門（開発ツール, まとめ）
はじめに 携帯サイトは、PCのWebブラウザではテストできません。携帯のWebブラウザにはさまざまな機種依存仕様があるからです。マークアップ言語の違い（HTML/HDML）絵文字表示可能な画像形式（gif/png/jpg、カラー/モノクロ、色数、サイズ）受信サイズアクセスキー これらは携帯の実機でテストする必要がありますが、開発中に携帯の実機でテストをするのは大変です。実機ではソースを見ることもできませんし、経費もかかります。 そこで携帯シミュレータの出番です。すべての機種依存仕様を正確にシミュレートできるわけではありませんが、上記のうち、1. 、2. 、5. をテストすることができます。本稿では、携帯サイトの開発に必須となる携帯シミュレータの紹介と、使用上のポイントを説明します。対象読者 携帯向けWebサイトの開発者必要な環境 Windows 2000/XP携帯シミュレータ一覧 携帯シ
デザインのインスピレーションを効率よく得るためのサイト「FAVEUP」
ロゴデザイン、名刺デザイン、Flashのサイト、CSSのサイトの4種類に分かれており、それぞれについて「これは！」というようなデザインのインスピレーションを得ることができるサイトです。各デザインには投票によってランクがつけられており、高ランク順に並び替えることもできるので、効率よくかっこいいデザインを探すことができます。 アクセスは以下から。 Design Inspiration Gallery - FAVEUP http://www.faveup.com/ ロゴの場合（新着順）（高ランク順） 名刺の場合（新着順）（高ランク順） Flashを使ったサイトの場合（新着順）（高ランク順） CSSを使ったサイトの場合（新着順）（高ランク順）
CSSでWEB2.0風ボタンを作成するサンプル:phpspot開発日誌
filament group inc. || Styling the Button Element with Sliding Doors Particle Tree recently posted an article describing a technique they've come up with the style the button element. For those who aren't familiar, form buttons are notoriously difficult to customize. CSSでWEB2.0風ボタンを作成するサンプル。 buttonタグで、次のようなWEB2.0風なカッコいいボタンが作れるサンプルが提供されています。 HTMLタグはこんな感じ。 <button value="submit" class="submitBtn"><s
覚えておきたい配色のワザと便利なツール :: Love & Design ::
Webデザインや配色に役立つ（かもしれない）テクニック、便利なツールを紹介しています。 /*無駄にエロいのは仕様です*/ 01 About 02 Blog 03 Color 04 Design 05 Love 06 etc 色の3つの要素 配色を行う前に、色に関する基礎知識をおさらい。色は「色相・彩度・明度」の3つの要素によって成り立っています。明度だけの性質を持つ無彩色に対し、有彩色は色相、彩度、明度の3つの性質を持っています。これを「色の3属性」と呼びます。 色相（しきそう：Hue） 色相とは、赤・橙・黄・緑・青・紫などの色みのこと。 （色相はつながりあって色相環という輪になります。） 彩度（さいど：Saturation：Chroma） 色の鮮やかさ、強弱の度合いのこと。 彩度が高い（鮮やか）⇔彩度が低い（鈍い） 明度（めいど：Value：Brightness） 色の明るさの度合いのこ
これで完璧！ロゴデザインのためのお役立ち資料まとめ | P O P * P O P
これがあればもう完璧ですね・・・300以上ものロゴデザインに関するサイトを集めたまとめです。 チュートリアルからロゴデザインのアイディアまで・・・かな～り使えるのではないでしょうか。300以上もあるのでさすがにいくつかのカテゴリーに分類されていますね。 どんな役立つ資料があるのでしょうか。詳しくは以下をどうぞ。 ↑ ロゴのタイポグラフィーに関する資料いろいろ。フォントは悩みますよね・・・。 ↑ お約束ですが、「2.0っぽい」ロゴデザイン集についてもいろいろ教えてくれます。 ↑ 素敵なロゴデザインを集めたサイトも紹介してくれます。 全てのカテゴリーは以下のとおりです。是非ご活用ください。 Importance of Logo （ロゴの重要性） Logo Design Software （デザインのためのツール） Logo Design Tutorials （チュートリアル） Logo Fil
相性の良い色を自動でピックアップしてくれる「ColorBlender」
ウェブサイトやブログを作る上で配色はかなり重要ですが、それ故に面倒なものです。そういった悩みを解消するのがこの「ColorBlender」。基準となる色を1つ指定すれば、それに合う色を5色出してくれます。 詳細は以下から。 ColorBlender.com | Your free online color matching toolbox まずスライダーでRGBを調節。 色が決まったら右の「Match blend from active colour」を押し、今のパレットを破棄することをOKする。 すると自動でピックアップされた色が出てきます。 Editing modeを「Direct Edit」から「AutoMatch」に変えると、スライダーを動かすだけで色がピックアップされます。 フォトショップ用やイラストレーター用のカラーパレットとして保存でき、作った配色にリンクするURLも生成可能
破綻しない色の組み合わせが簡単に作成できる「ColorJack: Sphere」 - GIGAZINE
色彩構成を決めるのはなかなか難しいものがありますが、この「ColorJack: Sphere」を使えば、色彩の理屈にぴったり合った感覚のみに頼らない正確な色彩構成が可能です。 詳細は以下の通り。 ColorJack: Sphere 例えばこの「Neutral」なら連続した色を簡単に選ぶことができます 「Analogous」ならもうちょっと間隔を開けて選択するので色彩に幅ができます 「Clash」は補色の関係を考えるのに使える 「Six-Tone」あたりは割と使いやすい 「Websafe」にするといわゆるセーフカラーのみで選択可能になります 元々の色の組み合わせ自体をスペクトラム風以外にもいろいろと変更可能で、カスタム設定すればこんなことも可能です
グラデーションを使ったデザインのやり方 - GIGAZINE
Web2.0のデザイン的要素として「グラデーションをかける」という重要なものがありますが、このグラデーションのかけ方が実際にやってみると実に難しい。ネット上でいろいろ調べてみるとグラデーションのかけ方自体は様々な方法やチュートリアルが見つかるものの、「何が正解なのか？」というのは見つかりません。つまり、何がそのときに最もベストな方法なのかがわからないわけです。 また、ブログのテンプレートを選ぶ際にも、どのようなグラデーションが自分の目指すテーマのブログにふさわしいのかも基本的な知識がないとなかなかわかりにくいものです。 というわけで、今回はグラデーションを使ったデザインの仕方について。デザインをしない人でもどのデザインを選べばいいかがわかるように書いてみました。 ■間違ったグラデーションなど無い まず一番わかりやすいグラデーションについての誤解はこれ、汚いグラデーションやださいグラデーショ
bodyに設定しておくと便利な3つのポイントとおまけ｜CSS HappyLife
CSS（スタイルシート）でbodyに設定しておくと便利な5つのポイント - デザインウォーカー | DesignWalker - ロサンゼルスで働くウェブデザイナーの日記を読んで、ボクなりな最初に指定して置くと良いポイントを上げたくなったので書いちゃいます。 むしろこのサイトの方向性的に有った方が便利だよなーと。 書くきっかけを頂き、感謝いたします。 ちなみに、最初に指定しておくポイントってそれぞれだと思うので、一つの参考として読んでいただければ幸いです。 最初にbodyに指定しておくと便利だと思う3つを。 body { background:#FFF url(../img/share/bg.gif) no-repeat left top; font-family:Verdana, "ＭＳ Ｐゴシック", sans-serif; font-size:80%; } じゃあ、詳細について色々書
| ＾＾ |Byozine:秒刊ネットマガジン:: スタンドアローンでIE3～IE7をまとめていれれるツール『Multiple_IE』
2007年01月25日 スタンドアローンでIE3～IE7をまとめていれれるツール『Multiple_IE』 最近仕事でIE7が普及しているせいか、IE6を入れているマシンが 少なくなった。一度IE７をいれるとなかなかIE６に戻すことができず IE6で確認したのか？と問われると困ってしまう そこでスタンドアローン（単独アプリ）で気軽にIEを いれれるという優れものアプリがあるので紹介する。 ■スタンドアローンのIE3～IE7を公開するサイト ■Install multiple versions of IE on your PC | TredoSoft ■スタンドアローンのIE3～IE6 はっきりいってIEの３なんかは全く仕様用途はないのだが、 まれに仕事でブラウザチェックするときIE６などはチェック する場合があるので、こいつをいれると便利。 ■IE6, IE5.5, IE5,
CSSレイアウトが崩れている時に試す10の処方箋::::::STOPN' LISTEN::::::to the silence:::::::
お探しのページは「すでに削除されている」、「アクセスしたアドレスが異なっている」などの理由で見つかりませんでした。以下でキーワードやカテゴリーから記事を探すことができます。
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
ロゴ・テンプレートを活用しよう - DesignWalker
