Atomic DesignはWeb開発を救うのか - DMM.comラボ デザイナーズブログ
前置き Webを便利に・高品質にしようと技術が進歩する中、コンポーネント設計に寄り添ったシステムが多く出てきました。 ただし、それらを十分に活用するにはデザインから見直さなければなりません。 コンポーネントベースのUIデザインは汎用性・再利用性の観点からも有用ですが、それを実現する際には「コンポーネントの定義」が非常に難しいことがあります。 PDCAサイクルをまわす時のようにあとから再びデザインに手を加えることが予測される環境下では、コンポーネントの粒度が曖昧なままでいると思わぬコストが発生する場合が多々存在するでしょう。 そこに対して一定のルールを持った設計システムが導入されることにより、未来の要望に対応できる柔軟なデザインが構築できるかもしれません。 そう、デザインにも設計は必要なのです！ Atomic Designとは？ atomicdesign.bradfrost.com Atom
PROPO DESIGN : プロポデザイン
propo | ABBY LOOK BOOK COLLECTION propo | MONA propo | RIN propo | AKI
ScaleOut | Supership
2024年4月1日より、Supership株式会社は親会社であるSupershipホールディングス株式会社に吸収合併されました。 合併に伴い、存続会社であるSupershipホールディングスは社名をSupershipに変更し、新たな経営体制を発足しました。本件に関する詳細は、プレスリリースをご確認ください。 2024年4月1日より、Supership株式会社は親会社であるSupershipホールディングス株式会社に吸収合併されました。 合併に伴い、存続会社であるSupershipホールディングスは社名をSupershipに変更し、新たな経営体制を発足しました。 本件に関する詳細は、プレスリリースをご確認ください。
ドット柄パターンの定番として使いやすい「Simple Dots」
パターン素材の中でも、定番の種類として幅広く利用されているドット素材。自身でも制作することはできますが、もっと簡単にバリエーションがあると嬉しいものです。そんな中今回は、ドット柄パターンの定番として使いやすい「Simple Dots」を紹介したいと思います。 可愛らしい配色・印象をドット柄Photoshopパターンが50種収録されています。 詳しくは以下 シンプルにベタ面カラーにドットが散りばめられているものから、2重のドット柄が使用されていたりとアレンジが加えられているものもあるので、ワンパターンにならない点が嬉しいですね。512px×512pxの使いやすいサイズで制作されており、パターンをそのまま使用したり、制作しているデザインやパターン・テクスチャと組み合わせて使っても、アレンジの幅が広がりそうですね。 特に女性らしいデザインには最適ではないかと思います。気になる方は以下サイトよりダ
[CSS]フォームの見栄えをぐっとよくする、テキスト入力欄とボタンをCSS3で美しくスタイルするチュートリアル
CSS3 Form Styling Cheat Sheet CSS3でスタイルするテキスト入力欄 CSS3でスタイルするフォームのボタン CSS3でスタイルするテキスト入力欄 HTMLは非常にシンプルです。 classのhogeは、随時変更して利用してください。 HTML <form> <input type="text" class="hoge" /> </form> まずは、ベースとなるスタイルシートです。 CSS: Basic border:0; padding:10px; font-size:1.3em; font-family:Arial, sans-serif; color:#aaa; border:solid 1px #ccc; margin:0 0 20px; width:300px; 枠線を角丸にします。
商用利用も再配布も限界無しのフリー！全250種類2500個、世界各国の国旗のアイコン素材 - 2500 Flag Icon Set
個人でも商用でも無料で利用でき、バックリンクも不要、コピーも修正も配付もOKな2012年版の世界各国の国旗のアイコン素材を紹介します。 国旗アイコンはこれさえあれば、もう困らないって感じですね。 2500 Flag Icon Set 国旗は全部で250種類あり、デザインはフラット・シャイニーの2種類が揃っています。a 国連加盟国数は2012年現在193ですが、例えばイギリスだとイングランドやユニオンフラッグが揃っています。 国旗は各国、デザイン2種類、サイズ5種類 ダウンロードできる素材のフォーマットはPNGで、サイズは16×16, 24×24, 32×32, 48×48, 64×64の5種類です。 素材は個人でも商用でも無料で利用でき、ライセンスはMIT Licenseでバックリンクは不要、とのことです。 詳しくはダウンロードファイルの「LICENSE.txt」をご覧ください。
和のデザインに使える！国内商用可フリー素材・素材サイトまとめ
こんにちは、Kanaです。 日本らしい、和のデザインを担当したときに利用した素材サイトや、フリー素材をご紹介します。 和の雰囲気をもった無料で商用利用ができる素材って、そう多くはないんですよね…。 今後また和のテイストのデザインをするときのためにも、まとめておくべく記事にしました。 それでは、素材を提供してくださる方々に頭を下げつつ、ご紹介したいと思います。 商用可のサイトや素材を集めていますが、詳細な規約は、ご利用の際ご自身でご確認ください。 2014/12/10：素材サイトを追加しました。 イラスト素材和柄商用フリー素材 WArgo Pattern（ワーゴパターン） こちらの素材サイトは和素材が非常に充実しています。和風イラスト、和風写真、和柄パターンなど、和デザインを作るにあたり、欲しくなる素材がたくさん集まっています。 WArgo Pattern（ワーゴパターン） 季節素材 夢幻華
ウェブデザイナーに人気のある有料・無料のフォント ベスト10
世界14ヵ国のウェブデザイナーにアンケートをとった、人気のある有料・無料のフォント ベスト10を紹介します。
ボタンデザインの参考に! 最近発表されたPSDボタン素材まとめ「23 Extremely Fresh and New Button PSD Files」
ボタンデザインの参考に! 最近発表されたPSDボタン素材まとめ「23 Extremely Fresh and New Button PSD Files」 webサイトからスマートフォン、タブレット端末まで、多くのサイトやアプリデザインに利用されるボタン素材は、デザイン性はもちろん、用途に合わせた使いやすさと認識のしやすさが重要なポイント。そこで今回紹介するのが、最近発表されたPSDボタン素材をまとめた「23 Extremely Fresh and New Button PSD Files」です。 Dribbble – Tasty Web Buttons by Norm シンプルなボタンデザインはもちろん、用途別に利用しやすい素材が多数紹介されています。中でも気になったものをいくつかピックアップしましたので、下記よりご覧ください。 詳しくは以下 ■Dribbble – UI Kit – Fr
あなたのデザイン力をアップする、仕事で使える高品質なPhotoshopの素材がパックになった -PsDefaults
ブラシもぼけ以外に多数 PsDefaultsは有料の素材セットですが、無料のミニキットもダウンロードできます。 無料版の中身は下記の通りです。 Photoshop用のスタイル ボタンなど Photoshop用のシェイプ アイコン、アローなど Photoshop用のパターン モザイク、タータン柄、木、ノイズなど Photoshop用のアクション ヴィンテージ、セピア、レトロ、ロモ、モノクロなど Photoshop用のブラシ ぼけ、グランジ、スワールなど Photoshop用のグラデーション 鮮やかなカラーやパルテルなど 素材の利用にあたっては個人でも商用でも無料で、ウェブサイト・アプリケーション・紙などに使用できる、とのことです。詳しくはダウンロードファイルの「License.txt」をご覧ください。 無料版のダウンロードはトップページの「Get Updates」にメールアドレスを登録し、そ
1920x1200pxの高解像度だから背景にも安心、ざらっとした布地のテクスチャ素材
商用でも無料で利用できる、ざらっとした布地のテクスチャ素材を紹介します。 Free Stained Canvas Backgrounds [ad#ad-2] ダウンロードできる素材は全部で12種類あり
なにかと使える手書き風 矢印のphotoshopブラシセット「Free Doodle Arrows Photoshop Brush」
デザインする上で便利なモチーフの一つが矢印。何かを注目させたり、行き先を示したり、ループを表現したりと、いろいろな表現を簡単にしてくれますが、今日紹介するのは手書き風の矢印のphotoshopブラシセット「Free Doodle Arrows Photoshop Brush」です。 太めの矢印から、点線、実践など様々なy印がセットになっていて、全部で26の矢印ブラシがセットになっています。収録されている矢印は以下をご覧ください。 詳しくは以下 ダウンロードは原文の「Click here to download the Zip file」からどうぞ。解凍後は.abrファイルとなっておりますので、ブラシファイル(.abr)をPhotoshopにドラッグ&ドロップするか、オプションバーにあるブラシプリセットを開いて、ブラシファイル(.abr)を読み込めば、利用できるようになります。 Free D
人はなぜ角丸に魅かれるのか、その理由と角丸の効果的な使い方
ウェブのインターフェイスだけでなく、現実の世界でもたくさんの角丸を目にします。角丸は一時のトレンドではなく、デザインのスタンダードと言ってもよいでしょう。 そんな角丸がなぜ好まれるのか、どう使えばよいのか、ウェブページにどのように実装するのかなどを紹介します。 Rounded Corners and Why They Are Here to Stay 下記は各ポイントを意訳したものです。 角丸は目に、そして脳に優しい< 角丸のイメージは安心 -Appleのこだわり 角丸はいつ使用するべきか 角丸の実装：CSS3< 角丸の実装：古い方法 終わりに 角丸は目に、そして脳に優しい ビジュアル認知の権威：Jürg Nänni教授によると、『鋭角の長方形は同じ大きさの楕円より認知するのに努力を必要とする。人間の目は円形のものをより速く捉えることができる。」と述べています。 鋭角と角丸の視線の流れ 鋭
ヴィンテージ風のざらっとしたテクスチャを作成できるPhotoshopのブラシとパターン素材 -Maleika E. A.
ヴィンテージ風のざらっとしたテクスチャを作成できるPhotoshopのブラシとパターン素材 -Maleika E. A.
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
ウェブ初心者も安心して作成できる、無料HTMLテンプレート素材24個まとめ - PhotoshopVIP
新着記事
新着記事
新着記事
新着記事
ウェブデザインのセンスを学ぼう、2012年上半期洗練されたディテールのUIデザインのまとめ