ウェブ配色ツールの決定版「UIPalette」もう色選びに迷わない！ - 宇宙新聞社
2015-11-28 ウェブ配色ツールの決定版「UIPalette」もう色選びに迷わない！ http://www.uipalette.net/ ブログをカスタマイズするとき色選びに苦労していませんか？ 今回は人気の配色ツールをまとめたUIPaletteを使ってみたのでご紹介します。色選びはUIPaletteを使って作業時間をぐんと削減しましょう！ UIPalette UIPaletteは左のメニューに用意された11個の配色ツールを自由に選んで利用できます。 BrandColors BrandColorsは海外企業のイメージカラーがまとめられた配色ツール。 ベースカラーを決定しないことには始まらないので、まずはここを参考にしてみましょう。配色パターンを丸ごと使うと企業イメージと被るので注意が必要です。 Paletton Palettonはベースカラーに合わせた配色パターンを表示してくれます。
なぜメニュー表示用ボタンの「ハンバーガーアイコン」はダメなのか？
スマートフォンなどのモバイル端末用UIでよく用いられる「三」のマークのアイコンは、ハンバーガーのように見えることからアメリカでは「ハンバーガー」アイコンと呼ばれています。徐々に浸透してきたハンバーガーですが、UIデザインの優劣という観点から見た場合、「劣った醜い撲滅すべきものである」という意見が出されています。なぜハンバーガーがダメなのかについて、ジェームズ・アーチャー氏がデータ分析結果を基に理論的に解説しています。 The Hamburger Menu Doesn't Work - Deep Design http://deep.design/the-hamburger-menu/ 下の画像の赤丸で囲われたのが「ハンバーガー」。モバイル端末UIだけでなくデスクトップUIでも広く普及したアイコンで、クリックすることで主にメニューなど他の追加情報を表示させられます。 ◆不親切 一般的に普及し
Bootstrapで最近人気の高いレイアウトやコンポーネントを簡単に実装できるテンプレートのまとめ
上部固定のScrollspy対応ナビゲーション、アニメーションがかっこいいオフキャンバスメニュー、ブラウザの高さいっぱい・半分に画像を配置、複数のコンテンツを配置するレスポンシブ対応のコンポーネントなど、最近よく見かける人気の高いレイアウトやコンポーネントを簡単に実装できるBootstrap用のテンプレートを紹介します。 Bootstrap 実装方法のほとんどは、Bootstrapの最小限の構成に数行のHTMLと外部スタイルシートを記述するだけです。 Bootstrapの基本的な使い方は、下記の記事を参考にどうぞ。 参考 Bootstrapのグリッドシステムの基本な使い方 BootstrapのベースのCSSを使ってさまざまな要素を実装してみよう！基本要素とナビゲーションのスタイル 以下のテンプレートはApache 2.0ライセンスで、個人でも商用でも無料で利用できます。 Scrolling
あなたのWebデザインをレベルアップさせる書籍【厳選17冊】 - paiza times
Photo by Marcy Leigh こんにちは。谷口です。 現在、Webデザイナーとして働いている皆様はどんな書籍を読んでいますか？ 最近は、基礎的なデザインの勉強をしてきた方だけでなく、もともとITエンジニアとしてWebサービスの開発をする中で、Webデザインもすることになったという方も多くいらっしゃるかと思います。 今回は、Webデザインの仕事をしている方々が、デザインをするに当たってジャンルごとに役立つ書籍を17冊ご紹介いたします。 目次 ・IA、UI、UX ・レイアウト ・配色 ・HTML/CSS ・CMS組込み ・デザイン技法 ■IA、UI、UX ◆1.IAシンキング Web制作者・担当者のためのIA思考術 IAシンキング Web制作者・担当者のためのIA思考術 作者: 坂本貴史,宮崎綾子,長谷川恭久出版社/メーカー: ワークスコーポレーション発売日: 2011/03/29
960.gsでCSSが苦手な人でも簡単段組みデザイン : エクスギア Blog
開発者にとって大変なこととは開発をすることよりも大変だと思うことがあります。それはデザインに関する部分です。 たとえば、私にとって3段組みのモックのHTMLを主要ブラウザできちんと表示されるCSSで奇麗に何の資料も見ずに作成することはとても至難です。 知識はありますが、全てを正しく記憶しているわけではないので時間が掛かります。 デザイナーさんに頼めば済むといえばそれまでですが、ちょっとしたアプリケーションを作ってみたいなど開発できる人がCSSを使えるメリットは大きいと思います。 というわけで、CSSを簡単に利用できるCSSフレームワークは数多くあるのですが、私が個人的に気に入っているCSSフレームワークである960 Grid System(960.gs)について紹介したいと思います。 960.gsとは 最小限のブロックとなる要素の幅を決めて、そのブロックの倍数でデザインしていくグリ
【デザインまとめ】綺麗なデザインの管理画面 40種類
今日は管理画面のデザインを、まとめてみました。いつもより多めな40種類です。トレンドを反映してか、フラットデザインが多いですね。 通常の静的なサイトのデザインとは異なり、投稿がある場合無い場合とたくさんのパターンを考えながら制作しなければならないので、デザイン力が問われます。これらを日本語に置き換えるとまた違って見えたりするのですが、ひとまず、ご参考になればと思います。 ▼ The Kamarel デモサイト ▼ Apricot Bootstrap デモサイト ▼ The Vira デモサイト ▼ Cameo デモサイト ▼ DefOne デモサイト ▼ Pixit デモサイト ▼ AdminEx デモサイト ▼ Odin デモサイト ▼ Minimal デモサイト ▼ Delighted Flat デモサイト ▼ Tisa Premium デモサイト ▼ Adminre デモサイト ▼
Googleの提唱する「マテリアルデザイン」の事例を集めまくって無料で素材のダウンロードまで可能な「MaterialUp」
Googleが開発者向けイベントGoogle I/O 2014で発表した新しいUX体系が「マテリアルデザイン」です。アニメーションやカードデザインなどを使い、「合理的な余白と動きを使った統一理論に基づいたもの」と定義されていますが、このマテリアルデザインの優れたウェブサイトやモックアップを毎日最大12個展示する「MaterialUp」は、「優れたマテリアルデザインとは何か」が一目で分かる上に素材のダウンロードまでできる便利なウェブサイトになっています。 The Best Of Material Design, daily – MaterialUp http://www.materialup.com/ マテリアルデザインとは何か？ということは、以下の記事から読むことが可能です。 アニメーションを使ったGoogleの新UXデザイン「Material Design」とは？ - GIGAZINE
How to Create Website Wireframes
2014年8月17日 Webサイト制作, 便利ツール WebクリエイターボックスではWeb制作の応用技術をよく紹介していますが、基本の流れはちゃんと説明していないな…ということで、「連載！実践で学ぶWebサイト制作ガイド」として、実際に1つのサイトを作りながらWeb制作の流れと方法をまとめて書いてみることにしました。この連載企画はブログ開始当初に考えていましたが、2年半ほど忘れてました…。今回は「ワイヤーフレームの作り方」です。これも過去に「Webサイトの骨組み: ワイヤーフレームを素早く・手軽に・美しく制作する」という記事を書いていたのですが、私の使用するツールも変わったので、改めて記事にすることに。 ↑私が10年以上利用している会計ソフト！ 実践で学ぶWebサイト制作ガイド：その3 目標：わかりやすいワイヤーフレームを作成することができる 必要なもの：紙とペン 対象レベル：超初心者OK
知らないと損！ウェブデザインに特化したPhotoshopの効率的な89の時短テクニック -神速 Photoshop Webデザイン編
Photoshopを毎日使うウェブ制作者はぜひ目を通してほしい、Photoshopを自分の手足のように使えるようにするノウハウ、同じ結果でも遙かに時間が短縮されるテクニックが満載のオススメ本を紹介します。 同サイズの画像をスライスするのに5分かかっていたのが1分で！ 10px以下の小さな文字を鮮明にするのに10分以上かかっていたのが5分でよりキレイに！ など実用的な技が満載です。 「神速 Photoshop Webデザイン編」ではウェブデザインの現場でPhotoshopを使う時に役立つ情報が満載！ Webデザインに特化したPhotoshopの環境設定方法から、すばやいスライス、効率的なカンプの作成、デザインのバリエーションを楽につくるなど、実践的なテクニックや便利なツール、そしていざという時の「直し」に強いデータをつくる方法など、デザイナーの時間を大幅に短縮します。 神速デザインの5箇条
あなたが作ったサイトのフッターの役割は？12のフッター活用方法！
昔はさっぱり注目されていなかったフッターエリアですが、今では多くのクリエイターがフッターに関心を持つようになりました。フッターデザインだけを集めたサイトなんて過去にほとんどありませんでしたが、ここ2、3年でいくつもそういったサイト・ページを見るようになりました。また特に海外サイトで言えることですが、最近では「これがフッターなのか！」と思う、すごいクオリティーのフッターも見る機会が多くなりました。 皆さんは大きく関心を集めるようになったこのフッターエリアを上手に活用できていますか？ ユーザーの起こすアクションを絞る(誘導する) 皆さんはブログの記事を読み終わった後、次にどんなアクションを起こしますか？ スクロールしてトップに戻る 元々いたサイトに戻る(はてブとか) タブを閉じる ツイートしてみる なんとなくコーヒーを飲む 上記のようにユーザーは、記事を読み終わると必ず何らかのアクションを起こ
フリーでクオリティの高いWordPressテーマまとめ「30 New Free High-Quality WordPress Themes」
TOP > WordPress > フリーでクオリティの高いWordPressテーマまとめ「30 New Free High-Quality WordPress Themes」 サイト制作に利用している方が増えているWordPress。プロの方はもちろん、サイト運営を考えている一般の方にも大きな人気を集めています。そこで今回は、フリーでクオリティの高いWordPressテーマをまとめた「30 New Free High-Quality WordPress Themes」を紹介したいと思います。 Busby: Free WordPress Personal Blog Theme シンプルテイストなテーマから機能を付加したテーマまで、さまざまなテーマが紹介されています。中でも気になったものをいくつかピックアップしましたので、下記よりご覧ください。 詳しくは以下 ■Free E-Comm
最低限覚えておきたいWEB配色の基本２大原理と６つの配色パターン
ユーザーに届ける価値を徹底的に追求する マーケティングを提供します © Copyright 2022 バズ部. All rights reserved. WEBサイトのデザインは、誰もが頭を悩ませる部分だ。 「どういう配色なら良い印象を持ってもらうことができるのか？」「どのレイアウトならコンバージョンが上がるのか？」など、様々なところまで考えを張り巡らさなければいけないからだ。 そこで本日は、The Art of Color Coordination というインフォグラフィックをご紹介する。これを見れば、WEB配色の基本の２大原理と、今すぐに使える６つの配色パターンがすぐに分かる。 そして、初心者でも、統一感のある配色のWEBサイトを作るための大きな助けとなるはずだ。 また、私たちバズ部は12年で400社以上のメディア支援を行い、 立ち上げから10ヶ月で14.6億円の売上を産んだ不動産メデ
UIの研究や作成に参考にできるフリーのUIキット４２:phpspot開発日誌
42 Outstanding FREE UI Kits for Web Designers | Queness UIの研究や作成に参考にできるフリーのUIキット４２。 PSD形式などで利用することができるようです。サイトのアイデアを練りつつ、どんなUIにしたらベストかな？といったことを考える際にもUIが揃っているので参考にできるかもしれません。 関連エントリ LionのUIキットPSD これは注目の超リッチなUIを実装できるjQueryベースのUIライブラリ「jQuery EasyUI」 独特のUIを提供してくれるjQuery用のUIフレームワーク「Ninja UI」 色々と使えそうなフリーのUIエレメントPSD７０種
1
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
TECH PROjin
http://monosy.com/blog/6
Basic Design Note
https://design-spice.com/2012/06/13/responsive-web-design-image/
商用利用も無料、美しいページレイアウトと細部まで作り込まれたUIエレメントが揃ったウェブデザイン用のPSD素材 -Blaz.
CSS3で作る、ドロップダウン⇔アコーディオンの切り替えをするレスポンシブWebデザイン対応のグローバルメニュー - かちびと.net