パワポ資料をぐっと魅力的にしてくれる「アイコン」を無料でゲットしよう！ - グローバル経営の極北
最近資料デザインを「現代的」にしたいなと思っていて、フラットデザインのテンプレートを購入して研究したりしてます。そこで重要となるのが「アイコン」で、うまく使うだけで資料がぐっと見やすくなります。いろいろとググってみると良いものがたくさんあるので、今回はそれをご紹介。 まずはこちら。 Googleが提供していてそのサービスでよく使われているMaterial Icon 942種類をパワポですぐ使えるようにコンバートしてくれています。たくさんのカテゴリーごとに網羅的にアイコンが揃っているのですごく使えそうです。さっそくダウンロードしました。 また、同じ方がFont Awesomeのアイコン369種類を同様にパワポ向けにコンバートしてくれています。 親しみやすいデザインが多いので、さまざまなタイプのパワポ資料に活用できそうです。いいですね。 次はこちら。 これは海外のデザインスタジオが作成している
ヘッダーやナビゲーション等、Webデザインをパーツ別に収集しているギャラリーサイトまとめ - かちびと.net
いくつか知っておいた方が、必要な時に 探しやすいと思ってメモします。Webサイト のデザインをヘッダーやフッターなど、 パーツ別に収集しているギャラリーサイトが いくつかあるのでまとめます。 そんな大量に有るわけではないですけど。パーツのデザインはいつも迷うのでこの手のギャラリーはいくつあっても結構重宝しますよね。 ブブンデザインアーカイブ 国内でおそらく唯一のパーツ別デザインギャラリーです。ナビゲーションやフッターなどで探せて、収集しているサイトも国内メインなので参考になるのでは。 ブブンデザインアーカイブ MephoBox ヘッダーやフッター、ナビゲーションやフォームデザインだけでなく、404やカレンダーなど全てのコンテンツをカテゴリにしてパーツデザインを収集しています。おすすめ。 MephoBox Pattern Tap こちらもナビゲーションやボタン、フォームデザインなどに分けてデ
CSS3とjQueryでフォームを美しく装飾する方法
2014年8月22日 CSS, jQuery どんなWebサイトでも設置されているフォーム。なんの装飾もなく味気ないフォームより、デザインされたもののほうが連絡してみたくなるはずです！そんなフォームも少し手を加えるだけで素敵なデザインに変身させることができます。今回はCSS3とjQueryを使ってより美しいフォームを作成する方法を紹介します。 ↑私が10年以上利用している会計ソフト！ フォームの仕様 今回チャレンジするフォームの主な仕様です！ グラデーション・ボックスシャドウを使って立体感を表現 角丸で丸みをつける（モダンブラウザ） 対応ブラウザ: IE7△, IE8△, IE9, Firefox, Chrome, Safari フォーム制作の流れ CSS3ってなんだ？という人もひとつひとつ記述していけば意外と簡単に作れるはずです！リンクをクリックで各項目にジャンプします。 テキストボック
Webサイトの基本要素 見出し・リスト・引用文のスタイルを整える
2014年8月20日 CSS Webサイトを装飾していく時に無視できない要素、見出し・リスト・引用文。特にWordPressでオリジナルのテーマを作る時は、ブログ用にこれら基本の要素すべての装飾もすると思います。そんな時に使うコードのバリエーションをメモしていたので記事にしました。少し変えるだけで応用できると思うので、ぜひ使ってみてください！ ↑私が10年以上利用している会計ソフト！ 色、フォント、サイズなどを変えるだけで、どんなサイトでも使える見出し・リスト・引用文用のHTMLとCSSコードを紹介します。そのままコピペして使っちゃってください。少しはコーディングの手間が省ける…かもしれません。ちょいちょい使っている画像も保存して使ってもらってもOKです :) サンプル画面内の「HTML」「CSS」タブをクリックでコードが表示されます。IE6, 7, 8, FF, Chrome, Safa
WEBレイアウト作成用のモック作成ツールキット:phpspot開発日誌
Free Sketching & Wireframing Kit WEBレイアウト作成用のモック作成ツールキット。 次のようなデザインで、UIパーツがつまったツールキットが各種ベクターフォーマット（.ai, .pdf, .svg, .eps) の形式でダウンロードすることが出来ます。 モック作成のテンプレ等は色々ありますが、デザインが本当にモックっぽいところが特徴 関連エントリ ブラウザ上でサイトのモックアップを光速で作成できるサービス「Lumzy」 WEBデザインのモック作成時に役立つ手書き用PDFテンプレート集 サイトのモック等に使えるダミーのイメージを簡単に作れる「Dynamic Dummy Image Generator」
【レポート】ピクセル濃度に依存しないWebページの制作方法 | エンタープライズ | マイコミジャーナル
Ext JS is now Sencha iPhone 4のようなディスプレイピクセル密度が高いデバイスの登場で、WebデザイナやWebデベロッパの関心は、異なるピクセル濃度のデバイスにどのように対応するかといった点に集まりつつある。基本となるテクニックのいくつかはすでにいくつかのブログで紹介されている。 iPhone 4でもPCでも画像を綺麗に表示するCSSの使い方 iPhone 4に対応したWebサイトを作る方法 iPad向けWebアプリケーション開発テクニック これまでマイコミジャーナルで紹介したテクニックは細部のテクニックが多い。そこでSenchaブログに掲載されたResolution Independent Mobile UIを紹介したい。モバイルデバイスにも対応したJavaScriptフレームワークSencha Touchで使われているテクニックの根本をまとめたもので、ピクセル
カラースキームを決めるのに役立つ、配色ジェネレータ17個まとめ | ライフハッカー・ジャパン
相性の良い色を選んでくれたり、配色の手助けをしてくれるジェネレータはたくさんあります。25 Free Color Tools, Apps and Palette Generatorsで、様々な配色ジェネレータが紹介されていましたので、ここから17個を厳選して以下に紹介します。 1. Color Scheme Designer 3 「Color Scheme Designer 3」は、バランスのとれた色味を生成してくれるジェネレータ。配色に困ったらまずここでヒントを得ましょう。 2. Toucan 「Toucan」では、似た色や逆の色など配色パターンが選べます。画像から色を抽出することもできますよ。 3. kuler 「kuler」は、Adobe製の配色パターン生成ツール。直感で色を決めてみましょう。Adobe製品との連携もあるようです。 4. ColoRotate 「ColoRotate」
使いやすいさと認知負荷のバランス感覚
私たちが「使いやすい、直感的」だといっている機器やソフトウェアでも、脳や身体は何かしらの処理を行っています。自分が使いやすいと思っていることも、人にとってはそうではない場合があります。これはリテラシーの高い／低いということで片付けることが出来ることでしょうか。デザインを考えるにおいて「簡単に（気軽に）使ってもらう」ということはひとつの課題であると同時に目標です。 インストラクショナルデザインは、人がいかに学習するのかを研究しデザインする分野です。Wikipedia では「より良い学習の環境を総合的にデザイン」と書かれているので、教育分野のデザインと考える方も少なくありません。20世紀後半から今世紀になると人の学習の仕方だけでなく、脳がどのように情報を処理するのかにも注目が集まりはじめます。こうした背景から認知負荷理論 (Cognitive Load Theory) が登場します。 人の認知
nanapiの初期バージョンに検索窓がなかった理由 : けんすう日記
はじめに 【仕事における８０：２０の法則】個人・企業のパフォーマンスを最大限に高める方法 | [b] bizMode｜世界のデジタルトレンドを読む というブログの中で nanapiというレシピサイトがありますが、c/o時は全然機能がなく、レシピを探せませんでした。果たして、カットオーバー時点において、レシピ検索機能は備え付けておく必要があったのでしょうか？また、個人ページにも全く機能性はありませんでしたが、今はどうでしょう？十分パワーアップしています。 そこに、多くの問題が発生したでしょうか？していません。 少しの問題は発生していましたが、プロダクト価値を脅かすものではありません。 徹底的に８０％にこだわり、重要なポイントは、十分に抑えられていたと思います。 こんな記事で紹介してもらったので、ちょっと書いてみます。記事内では、最初は検索結果に対しての工数をさかずにあとで回した、というニュア
SVGは普及する。WebデザイナーはCSSとともにSVGが必須科目に
Internet Explorer 9では、Webブラウザ上にベクター形式で画像を描画できるSVG（Scalable Vector Graphics）のサポートが表明されています。ITproの記事「IE9の登場で画像フォーマットの本命に浮上するSVG」では、IE9がSVGをサポートすることでSVGの普及が始まるのではないかと予想しています。同意します。 SVGはHTML、CSS、JavaScriptと並ぶWebの要素に SVGは2001年にバージョン1.0、2003年にバージョン1.1がW3Cの勧告として策定されました。しかしマイクロソフトはIE6、IE7、IE8とずっとSVGに対応せず、一方でSVG策定以前から同社などが推進していたVML（Vector Markup Language）と呼ばれるベクター形式の言語を実装してきました。 Webブラウザで最大シェアを持つIEで使えないSVGは
テーブルを見やすく、使いやすくするためのアルティメットガイド
ウェブページでデータをみせるテーブルを見やすく、使いやすくするためのスタイルや機能性などUIパターンを紹介したアルティメットガイドをJanko At Warp Speedから紹介します。 Ultimate guide to table UI patterns 下記は各ポイントを意訳したものです。 テーブルの「（エクセルでいうところの）行と列」の表記は、「横列と縦列」に統一しています。 はじめに 1. 列を交互にスタイリング 2. 列をフルに 3. テーブルのセクション 4. ソート 5. フィルタリング 6. ページネーション 7. スクロール 8. 固定されたヘッダ 9. ヘッダのないテーブル 10. 拡張可能な列 11. 列のアクション 12. マルチプルな列のアクション はじめに テーブルは構造化されたデータをみせるものです。そして、その目的はデータを読みやすくし、走査しやすく、簡単
売れるiPad/iPhoneアプリのためのデザイン必須知識
売り上げを左右する以前に、デザインが原因でアップルの審査落ちも起こり得ます。基礎データや注意点、素材サイトなど役立つ情報満載！ iPad/iPhoneアプリのデザインは、不要？ 重要？ 2009年11月に登録数が10万本を超え、毎日増え続けるiPhoneアプリ（参考：AppleのApp Store、登録アプリが10万本を突破）。「そろそろ作り始めてみたいけど、どこから手を出せばいいの？」というデザイナの方もいらっしゃるのではないでしょうか。 カヤック意匠部では、ネタアプリから本格的な楽器アプリまで、多くのアプリをリリースしています。そこで今回は、その経験を生かして、iPad/iPhoneアプリ制作を始めるに当たってデザイナが押さえておくべき基本的なポイントを、まとめて紹介します！ 「デザインを一切しなくても、アプリは作れる」 と、いきなりですが、デザイナがいなくてもアプリは作れます。アップ
SVGがWebに適している9つの理由 | エンタープライズ | マイコミジャーナル
SitePoint: New Articles, Fresh Thinking for Web Developers and Designers ベクターグラフィックを記述するための言語であるSVG 1.0は2001年にはすでにW3C勧告として公開されている。SVG 1.1も2003年にはW3C勧告になっている。SVGにはWebプラットフォームで利用するにあたってさまざまな利点があるが、最大シェアを確保しているIEがサポートしていないため、これまでそのポテンシャルほどにはWebブラウザからは活用されてこなかった。 しかし、この状況は大きく変わろうとしている。これまでSVGをサポートしてこなかったMicrosoftがSVGワーキンググループへの参加を発表。IE9でSVGがサポートされる公算が大きくなった。こうした状況を受けCraig Buckler氏がSitePointにおいて9 Reaso
cssのテクニックなどを学びたい時に見ておきたい12サイト - かちびと.net
cssが苦手で嫌いなので 好きになろうと思い、勉強に なりそうなサイトを国内外で 選んで絞ってみました。 同じ思いをしている方とシェア したいと思ったので記事にします。 リファレンスサイトは今回は割愛しました。勉強するなら抑えて当たり前ですしね。国内外合わせて11サイトとおまけが1サイトあります。まずは国内サイトから。 CSS HappyLife 個人的に国内でcssといえばCSS HappyLifeさん思い出します。基本から応用まで幅広く情報を配信。 CSS HappyLife CSS-EBLOG ほぼcss中心に情報を配信してくれています。こちらもかなり勉強になるサイト。サイト自体も見やすいですし、cssで困った時には必ず訪れたいサイトです。 CSS-EBLOG CSS Lecture cssで出来るテクニックを公開してくれています。デモページを用意してくれるのが凄く嬉しい。親切で分か
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
IDEA * IDEA
http://www.designwalker.com/2010/06/html5-template.html
フォント専門サイト fontnavi(フォントナビ)
原研哉氏トークイベント採録（1／5） | くらしの良品研究所 | 無印良品
みんなで作るWEBデザイン参考集「ブックマ！」
IDEA * IDEA
