CSSで様々な背景パターンを実装できるスタイルシート「pattern.css」 - NxWorld
「pattern.css」は、任意の要素に特定のclassを付与するだけで様々な背景パターンを適用することができるスタイルシートです。 チェック・ドット・ライン・ジグザクなど種類も豊富で、CSSなのでサイズ調整やカラー調整も容易にできるようになっています。 イメージは配布サイトの一部をキャプチャしたもので、これらもすべてCSSのみで再現された背景パターンになります。 使用する際は必要なCSSを読み込んで、適用したい要素に.pattern-{type}-{size}のようなルールでclassを付与します。 サイズはsm, md, lg, xlの4種類の中から先述したclassルールの{size}部分に任意のものを指定し、{type}にはどのような背景タイプを使用するかを下記12種類の中から指定します。 Checks .pattern-checks-{size} Grid .pattern-
UI デザイナーなら抱いて寝るべき1,198gの道具箱｜Fenrir Designers
来年新卒入社する UI デザイナーにブックリストをおくるから、おすすめの本はないかと同僚に聞かれたので「 そりゃあもう、オシドリ本一択だろう 」と即答した。 O'Reilly の『 デザイニング・インターフェース 第2版 』Jenifer Tidwell ( 著 )、色鮮やかな水鳥の細密画が目を引く、通称オシドリ本。UI デザイナーならおそらく、手にしたことないという人はいないだろう。 しかし私の返答に、同僚は苦い顔をしたのだ。 「 それはちょっと初学者には重いと思います... 」 重い？何もハーマンを読めとは言ってないじゃないか。オシドリ本だよ？何一つ難解な表現などないこの本が重い？心外だな、と思いつつも手にとってみたら、なるほどずっしり重かった。 うん、これは 1kg はこえている気がする。なんだか無性に気になったので測ってみたら 1,198g あった。 確かに重いな。電車で読んだりす
WebデザインにおけるZ字型レイアウトの活用方法
Nickはロシアのセントピーターズバーグ出身のソフトウェアデベロッパー/ブロガーです。彼による他の記事はこちらをご参照ください。 あなたが書いた文章をすべてのユーザーが楽しみながら読んでいると想像するのは簡単です。しかし、現実を見てください。ユーザーはそんなことはしません。ただ斜め読みをするだけです。 ユーザーはWebページを読まず、斜め読みをします。何か目を引くものがあったときにだけ、斜め読みをやめて文章を読むのです。 デザイナーは、デザインしたWebページ上で人々がどこを見るかコントロールできます。ユーザーの目線を誘導するには、目がどのように情報を処理するのかを理解する必要があります。この記事では、Z字型パターンを使用したWebデザイン内に視覚的階層を生み出す理論と実践について説明します。 Z字型パターンとは何か、どのように作用し、なぜそうなるのか 読んで字のごとく、Z字型パターンのレ
有名サイトの事例から学ぶ12のWebデザイン・レイアウト
ユーザーはデザインを見たいのではなく、コンテンツを求めてサイトにアクセスします。Web UI Patterns 2016 Vol. 1で説明した通り、デザインは直感的で分かりやすくコンテンツを表示するための手段にすぎません。 この記事では、Webにおける12通りのレイアウトのパターンを実際の例や良い実践方法、共通のシナリオを通して見ていきます。 1. カード 2. グリッド 3. マガジン 4. コンテナの不使用 5. スクリーン分割 6. シングルページアプリケーション（SPA） 7. Ｆパターン 8. Ｚパターン 9. 水平的なシンメトリー 10. 水平的なほぼシンメトリー 11. 放射線状のシンメトリー 12. アシンメトリー 1. カード
Photoshopでテクスチャを使う3つの方法【初心者向け】現役デザイナーが解説
Photoshopの【テクスチャ】の使い方を初心者向けに紹介する記事。「パターンの定義」「レイヤーマスクの使用」「フィルターギャラリーを使用」の3つの方法を紹介。テクスチャを使うことで紙や布、岩などの質感を表現することが可能。 テックアカデミーマガジンは受講者数No.1のプログラミングスクール「テックアカデミー」が運営。初心者向けにプロが解説した記事を公開中。現役エンジニアの方はこちらをご覧ください。 ※ アンケートモニター提供元：GMOリサーチ株式会社 調査期間：2021年8月12日～8月16日 調査対象：2020年8月以降にプログラミングスクールを受講した18～80歳の男女1,000名 調査手法：インターネット調査 テクスチャとは画像の一部、または全体に特殊な効果を入れることによって紙や布、岩などの質感を表現するものです。 Photoshopではさまざまな方法を使ってテクスチャ効果
流行なんて関係ない！いつでも使える黄金ウェブレイアウトUIパターン12個まとめ
海外サイトUXPin Studioで公開された「Web Layout Best Practices: 12 Timeless UI Patterns Analyzed」の著者 Jerry Cao より許可をもらい、翻訳転載しています。 ウェブサイトを訪れるユーザーの多くは、コンテンツを楽しみにしており、デザイン目的で訪れているわけではありません。 この記事では、いつの時代にもマッチする、12種類の黄金ウェブレイアウトパターンを問題点や解決法、具体的な使い方のポイントと一緒に見ていきましょう。 コンテンツ目次 01. カード型レイアウト 02. グリッドレイアウト 03. マガジンレイアウト 04. 枠なしレイアウト 05. スプリット・スクリーンレイアウト 06. 単一ページレイアウト 07. F型パターンレイアウト 08. Z型パターンレイアウト 09. 水平方向の左右対称パターンレイア
Webサイトの見出しデザインまとめ13選！デザインの参考に | 株式会社LIG(リグ)｜DX支援・システム開発・Web制作
こんにちは、デザイナーの藤田です。 デザインをやっていると、見出しのデザインに悩むことって結構ありますよね！ 自分のデザインストックを増やすためにも、今回のブログでは今っぽい見出しデザインをタイプ別にまとめてみました！ 独学でつまずいていませんか？ 現場で活かせるWebデザインを効率的に学びたい、誰かに教えてもらいたい……という方は、「スクールでの勉強」もおすすめです。LIGではWebクリエイター育成スクール「デジタルハリウッドSTUDIO by LIG」を運営しております。 詳細を知りたい方は、ぜひスクールの詳細をチェックしてみてください！ →スクールの魅力が分かる資料はこちら！（資料請求） ※この記事は2022年3月に編集部が情報を更新しました ジャンプ率パターン ミニマムなデザインでは見出しに過度な装飾を加えずに、本文に対し見出しの文字サイズを大きくすることで見出しを目立たせるサイト
レスポンシブデザインで参考になるナビゲーション5パターン - ECサイト構築運営に役立つ情報発信｜モバイルファーストマーケティングラボ
レスポンシブデザインで作られたサイトでは、通常のナビゲーションメニューと違い、さまざまなナビゲーションの変化パターンが存在します。 ブロックを並べ替えたり、動的にドロップダウンリストに変更してみたりと色々と調整することができるので、レスポンシブサイトを構築する際にご参考ください。
jQuery Snippets #1 - NxWorld
基礎的なものからちょっとした機能の実装方法など、jQueryに関する個人的なメモ・スニペットリストの第1弾です。 今まで頻繁に使うものや覚えておきたいと思ったもの、今後使う機会ありそうなものを見つけた場合は、とりあえずEvernoteやJSFiddleなどに突っ込んでおいたりエディタへスニペット登録したりという感じだったのですが、それらをスッキリさせたくなった＋日頃参考にさせてもらっているかちびとさんの「jQueryスニペット」みたいなのを パクry… 自分用にほしかったので、ある程度溜まったらこのブログにまとめていくことにしました。 この動きならわざわざjQuery使わないといった脱jQueryな感じの記事もよく見かけるし、自分も案件によっては使わないことが稀にあったりはしますが、やっぱりjQueryだといろいろと短い記述で容易に指定できたり、ちょっと特殊な動きの場合でもプラグインを使っ
ウェブデザインの文章レイアウト組みパターンを展開してみる | バニデザノート
ウェブデザインの中の、バナーやサイドメニューを抜いた、文章のレイアウトパターンを展開してみました。基本はだいたいこんな感じだとおもうので、配置に困ったら試してみてください。
シームレスな背景パターンを作成できるジェネレーター・「Background Image Generator」
Background Image Generatorはシームレスな背景パターンを作成出来るジェネレーターです。背景の色や素材、形状、ノイズ等を選んでダウンロードするだけとお手軽で素敵。この手のツールは久しぶりに見た気がします。パターンはSubtle Patternsを参考にしているそうです。Subtle PatternsはライセンスがCC-BYなので自作出来るならしたほうが良いですね。 Background Image Generator
シームレスに利用できる クリエイティブかつデザイン的なベクターパターンまとめ「Pattern Design – 35 Seamless Free Vector Patterns」
シームレスに利用できる クリエイティブかつデザイン的なベクターパターンまとめ「Pattern Design – 35 Seamless Free Vector Patterns」 背景素材などでよく利用されるシームレスパターン素材。継ぎ目なく敷き詰められる点が非常に便利な素材です。今回はそんなシームレスベクターパターンをまとめた「Pattern Design – 35 Seamless Free Vector Patterns」を紹介したいと思います。 Abstract Hexagon Pattern Background on Behance デザイン的に非常に凝ったつくりが特徴のベクターパターン素材が多数紹介されています。 詳しくは以下 Patterns for Adobe Creative Cloud on Behance 色鉛筆で描き出したような、ラフなテイストが特徴のパターン。素
1
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
効果的なコンテンツの配置と視線誘導に適しているレイアウトとは？ | スターフィールド株式会社
新着記事
商用利用無料！ミニマルにデザインされたUIエレメントやコンポーネントが揃ってるCSSのライブラリ -Papier