少ない手間と知識でそれなりに見せる、ズルいデザインテクニック with Sass / Compass (English Version) https://speakerdeck.com/ken_c_lo/zurui-design-technique-english-version 第一回…
少ない手間と知識でそれなりに見せる、ズルいデザインテクニック// Speaker Deck
少ない手間と知識でそれなりに見せる、ズルいデザインテクニック with Sass / Compass (English Version) https://speakerdeck.com/ken_c_lo/zurui-design-technique-english-version 第一回…
デザインを学びたい全ての方へ - 海外のデザイン学習リソース200選
「デザインに興味があるのですが、どうやってデザインを学べばいいのでしょう？」という質問は、以前に書かせて頂いた「米国のデザイン教育から学んだこと」という記事に対して一番多かった反響の1つでした。これはデザインの分野があまりに多様なためにどこから手を付けていいのか分かりづらいというのが原因のように思います。 そこで今回は情報全体を俯瞰出来るようにするべく、下記のそれぞれのカテゴリー別に、それぞれ有益なリソースをまとめました。このリストが皆さんのデザイン学習リソースとしてお役立てば幸いです。 海外のデザイン学習リソース 23のカテゴリーOnline Learning（オンライン学習）UI/Web:（ユーザインターフェイス／ウェブ）General（一般）Product（プロダクト）Branding:（ブランディング）Book Cover Design:（ブックカバーデザイン）Design Por
「とりあえずUI直せば、どうにかなるんじゃないか病」になった話
「とりあえずUI直せば、どうにかなるんじゃないか病」が私の周りで流行している。もちろん私も何度となくかかっている。 この病気のはじまりは「目的を達成できないのはUIがいけてないせいだ！UIをとにかく今じゃない何かに変えれば問題は解決する」と思っちゃうことにある。 共通するのは、「とにかく今じゃだめなので、今じゃない何かにしたいからUI変えたい」という点。今じゃない何かにしたいのはわかるが、根拠が主観的すぎて成功する見込みがつかないのが困ったところ。 もちろん私も時にこの病気にかかり、ほんとにプロジェクトをすすめていいかどうか、どーしていいかわからず懊悩することも多々ある。というわけで、私なりに病気の定義と、自己治療法もなんとなく見つけたので、自省もこめて記録しておく。 「とりあえずUI直せばどうにかなるんじゃないか病」の主症状2点 根拠が主観的すぎて説得力がなく、社内を巻き込めない 本人が
商用利用も無料！手書き風アイコン122種類！
今日は私が集めているアイコンのいくつかを紹介させていただきます。今回は商用利用も無料(商用フリー)でOK！という気前のいい手書き風のアイコンをまとめました。ここで紹介するアイコンは全てリンクも不要で使えますが、ダウンロードして使うときは念のためライセンスの確認をしてくださいね！ ではどうぞ。 19 Freehand drawn sketch icons ダウンロード先:Visit site 実際に手書きで作成したものをスキャンしてイラレでクリーンアップしたものです。 HAND DRAWING ICONS SET ダウンロード先:Visit site まさに手書き中の手書きといったアイコンです。 Handycons 2 ダウンロード先:Visit site メディア関連の手書き風アイコンです。油絵っぽい感じが実にクールですね。 FreeHand ColorStroked icon pac ダ
Webユーザインターフェースの "暗黙知" を意識していますか？ : LINE Corporation ディレクターブログ
暗黙知（あんもくち、Tacit Knowing）は、ハンガリーの哲学者・社会学者マイケル・ポランニー（Michael Polanyi) によって1966 年に提示された概念で、認知のプロセス、或は、言葉に表せる知覚に対して、（全体的・部分的に）言葉に表せない・説明できない知覚を指す。Wikipediaより こんにちは。livedoorで検索全般を担当しております、須田です。 タイトルのままなのですが、少しづつ日本のWEBにおける暗黙知を共有したいと思っています。 暗黙知の共有することで得られるメリットですが、 ユーザーにとっては、分かりづらいUIを日本からできるだけ無くすことができ、斬新なUIに慣れるという煩わしい時間からの開放企業にとっては、暗黙知として決まりがあることで、UIを検討する時間の短縮にもなるというメリットがあると思います。 まずは誰でも知っていると思われる基本的なところだけ
CSS+HTMLのみで実装出来る、クロスブラウザ対応のWebデザインテクニック集 - かちびと.net
cssとHTMLタグのマークアップ のみで実装出来るテクニック集 です。クロスブラウザ対応のみ をcss-playから探したので、 ついでにご紹介します。 jsが使えない環境でデザインする機会があったのでメモがてらエントリー。css-playを中心に、あとはググったりSBMで探したり。マークアップはリンク先をご確認下さい。css-playはソースを。 シンプルなドロップダウンメニュー シンプルなドロップダウンメニューです。マルチレベルのメニューも可能。 demo 縦並びのフライアウトメニュー 横に出るフライアウトタイプ。画像を使用しています。 demo クロスブラウザ対応のグラデーション webkit系でもmozでもIEでもcssのみでグラデーションを実装。 Cross-Browser CSS Gradient ハック、テーブルも使用しないドロップダウンメニュー シンプルなドロップダウンメ
覚えて良かったCSSテクニック « zaru blog
ここ最近、覚えてよかったなーと思ったCSSテクニックをまとめてみる CSSテクニックは時代とともに変わっていくけれど、ここ1年ほどスタメンレベルで使うCSSテクニックが絞られてきたので、ここらでちょっと個人的にもまとめておこうかと。 liボックス 幅：190px マージン：15px liボックス ダミーテキスト。ダミーテキスト。ダミーテキスト。ダミーテキスト。ダミーテキスト。 liボックス ダミーテキスト。ダミーテキスト。ダミーテキスト。ダミーテキスト。ダミーテキスト。 <li>にはクラスを指定せずに、左右にぴったりくっ付くように配置が可能。 <style type="text/css"> #box1{ width: 600px; } ul{ width: 615px; margin: 0 -15px 0 0; overflow: hidden; _zoom: 1; font-size:7
少しのコードで実装可能な20のCSS小技集
2019年5月17日 CSS CSSハックに続き、このCSS小技集も私のブックマークにずらりと並んでいたので、整理も兼ねて記事にしてみました。CSSのお勉強を始めたばかりの頃にブックマークしておいたものも多数。。ということで初心者さんからベテランさんまで参考にしてみてください！ ↑私が10年以上利用している会計ソフト！ コードはサンプル内の「HTML」や「CSS」タブをクリックしてくださいね！ 少しのコードで実装可能なCSS小技集 シリーズ 【第2弾】少しのコードで実装可能な20のCSS小技集 【第3弾】少しのコードで実装可能な15のCSS小技集 まずはCSS基礎編 1. divを中央揃えにする ほとんどのサイトが基準となるdivを画面の中央揃えに設定しています。左右のmarginをautoにして中央揃えに。 See the Pen Center Div by Mana (@manabox
Under Construction
Please be wary if some broker is offering this domain for sale.
配色パターンからWebデザインを考える
2017年6月29日 Webデザイン, 色彩 ページを開いた瞬間にそのWebサイトのイメージを左右するほど重要な要素「色」。しかし色の組み合わせ、配色には無限のパターンがあり、正しい配色を見つけるのは簡単なことではありません。ここでは色彩の基礎と配色パターンの見つけ方の一例を紹介します。 ↑私が10年以上利用している会計ソフト！ まずは色彩の三属性について 色は彩度・明度・色相の三属性（三要素とも呼ぶ）から成り立っています。 彩度 色の鮮やかさの度合いを表します。彩度の高い色は派手・華やか・目立つ色といえます。子供服やキャラクターグッズ関連のサイトには彩度の高い色が使われることが多いです。逆に彩度の低い色は地味・おだやか・上品であるといえるでしょう。和食・ヴィンテージ風デザインのサイトには彩度の低い色がよく使われます。 明度 色の明るさの度合いを表します。明度が高い＝明るい色はさわやかで爽
ウェブデザインに黄金比やフィボナッチ数列など数学的な要素を取り入れる方法
黄金比、フィボナッチ数列、ファイブエレメンツ、サインウェーブなど数学的な要素を巧みにウェブデザインに取り入れる方法をSmashing Magazineから紹介します。 Applying Mathematics To Web Design 下記は各ポイントを意訳したものです。 また、当サイトでも黄金比をウェブデザインに取り入れる簡単な方法を紹介していますので、あわせてどうぞ。 黄金比をサイトのデザインに取り入れる簡単な３つの方法 はじめに 1. 黄金比（黄金四角形） 2. フィボナッチ数列 3. ファイブエレメンツ 4. サインウェーブ [ad#ad-2] はじめに 「数学は美です。」 数字嫌いの人には、ばかばかしく聞こえるかもしれません。けれども、自然や宇宙にある美しいもの、最も小さい貝殻から最も大きい銀河まで、数学的な要素を持っています。 数学ははるか昔から今日まで芸術や建築のデザインに
色の組み合わせでもう迷わないためのカラーセオリー | ライフハッカー・ジャパン
Webデザインでも企画書でも、色使いや色選びというのはなかなか悩ましいものです。デザインブログ「Before & After」に、デザインのプロでなくても上手な色選びができる、PDFのカラーセオリーのパンフレットがありました。 そのパンフレットによると、色相、濃淡、カラーパレットに関して少しでも知識があると、色の組み合わせがグッと良くなるということです。写真周辺に持ってくる色を上手くコーディネートするには、ちょっとした芸術的＆科学的センスと、ちょっとした色に関する知識があれば十分。全25ページのパンフレットを読めば、なんと完璧な色選びができるようになるそうです。 パンフレットの中では、まず写真のデジタルデータから自然なカラーパレットを作成する方法が載っています。そのカラーパレットの中から、ポイントとなる色を選び、寒色系や暖色系、トーンや色相などを揃えながら、自分好みに組み合わせていきます。
デザイナーが知っておくべき背景画像のリソースサイト集:phpspot開発日誌
36 Must Have Backgrounds and Patterns Resources for all Designers : Speckyboy - Web Design, Web Development and Graphic Design Resources デザイナーが知っておくべき背景画像のリソースサイト集。 背景画像のダウンロードやWEB上で動作するジェネレーターがまとまっていました。 背景画像リソース集 Huge Magazine - Desktop Patterns and Tiles 綺麗orおしゃれな背景画像パターン多数 Barracuda Backgrounds 地味だけど汎用に使えそうな背景画像 HYBRID GENESIS カラフルだけどこちらも汎用性がありそうな背景集 DinPattern ちょっと個性的なパターン集 ジェネレーター Tiled Back
CSSでリストを整形するなら覚えておくべき８つのリストデザインサンプル集:phpspot開発日誌
CSSでリストを整形するなら覚えておくべき８つのリストデザインサンプル集。 リストデザインというと、CSSの整形方法によって様々な見せ方が可能ですが、ソースコード＆チュートリアル付きがまとまったエントリが公開されています。 リストデザインの際は、いつも単調になりがち、という方は覚えておくと、ちょっと変わったデザインも作れそうですし、テクニックを駆使してまったく新しいデザインを考えることも出来そう。 それでは以下にそのデザインされたリストのサンプルをご紹介。 1. サイトのナビゲーション風にデザインされたリスト 2. 番号付き＆番号の横に縦のラインがはいった見やすいリスト 3. 矢印画像を使ったリスト 4. iPhoneスタイルのクールなボックスリスト 5. ツリーっぽい形式にできるリストデザイン 6. 複数行にしてテキストっぽく表示できるテキストリスト 7. ワンラインにして、カンマを付与
これさえやればCSSをマスターできるかもしれないCSSチュートリアル＆サンプル20:phpspot開発日誌
皆さん、新年あけましておめでとうございます。 今年も読んでいただき、ありがとうございます。 では、早速ですが記事のご紹介。 20 Ultimate CSS Tutorials That Will Help You Master CSS | DWSmg.com これさえやればCSSをマスターできるかもしれないCSSチュートリアル＆サンプル20。 全部、そのメカニズムについて覚えたらかなりCSSに詳しくなるのは間違いなさそう。 Advanced CSS Menu カーソルを合わせたときにメニューがCSSオンリーで切り替わる CSS Based Navigation こちらも同様。JavaScriptレスでメニューを切り替えます CSS Fancy Menu CSSとJSを使ってFlashばりのアニメーションメニューを作成 Expandable CSS Tabs Tutorial テキスト長に応
WEBデザイナーという肩書きを使う場合にあったらいいかもなスキルとWEBで見れる無料教材とリソース集:phpspot開発日誌
WEBデザイナーという肩書きを使う場合にあったらいいかもなスキルとWEBで見れる無料教材とリソース集 2009年03月23日- WEBデザイナーという肩書きを使う場合にあったらいいかもなスキルとWEBで見れる無料教材とリソース集。 プログラマが１ヶ月でWEBデザイナーに転身する方法 というエントリを見て、プログラマの方々のWEBデザインに関する関心の高さを見て書いてみます。 WEBデザイナーといっても色々な知識が必要で、かつ、最近はフリーのテンプレートも豊富にある中、どれだけ出来ればWEBデザイナーとして成り立つのだろう？という疑問がありましたので考えてみました。プログラマの方で、WEBデザインをやってみたい。また、全くの素人だけどWEBデザイナーを仕事にされたいという方の参考になれば幸いです。 最低限の知識編 1. HTMLとレイアウト力 まず、知っている人には物凄く当たり前の事ですが、
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
http://www.designwalker.com/2010/05/css3.html
IDEA * IDEA
2010年に参考にできそうなCSSベースのWEBデザイン集:phpspot開発日誌
http://www.designwalker.com/2009/11/corporate-tutorial.html
