[B! Webデザイン] indicationのブックマーク

indication id:indication

Webデザインに関するindicationのブックマーク (46)

Macaron | Visual component editor for Web development
Macaron is an open-source UI design tool to create and maintain Web Components.
indication 2022/06/16
Figmaから持ってこれるのスゴい

web

webデザイン
リンク
[CSS]「display: contents;」がすごい便利！ラッパーを使った実装が大きく変わるこれからのテクニック
例えばカードで、見出しが1行・3行、本文の量が多かったり少なかったりする場合、それぞれの高さを揃えるのは非常に難しく、かなりトリッキーな実装が必要でした。もしくは、JavaScriptを使用しなくてはできなかった実装です。こういったレイアウトをセマンティックなHTMLで実装できるようになるdisplay: contents;の基礎知識と使い方を紹介します。 How display: contents; Works 下記は各ポイントを意訳したものです。 ※当ブログでの翻訳記事は、元サイト様にライセンスを得て翻訳しています。︻更新︼ 2021/9/4: 現在の環境に合わせて、内容をアップデートしました。まずはおさらい、CSSのボックスモデル﹁display: contents;﹂を使用すると、どうなるか﹁display: contents;﹂について詳しく解説﹁display:
indication 2018/04/04
displayってなんでこうも、複雑なんだろう(理解力が足りてない)

css

Webデザイン
リンク
こういうのを一つは用意しておきたい！Webサイトのスタイルガイドを作成する時に便利な無料テンプレート素材
スタイルガイドを0から作成している人に、朗報です。 Webサイトで使用するカラーやフォント、ロゴなどを変更するだけで、そのWebサイトのスタイルガイドが作成できるSketchのテンプレート素材を紹介します。 UI要素はシンボル化されており、カスタマイズも自由。しかもスタイルガイドのフォーマットは4種類用意されています。 Symbols Symbolsで作成できるスタイルガイド Symbolsのダウンロード Symbolsの使い方 Symbolsで作成できるスタイルガイド Symbolsはその名の通り、シンボルで自動更新されるスタイルガイドのテンプレートです。使用するカラー・フォント・ロゴなどを変更するだけで、Webサイトに使用するさまざまなコンポーネントのスタイルを定義できます。
indication 2017/09/27
ライセンスが気になる。参考にする

web

資料

webデザイン
リンク
jQuery：スクロールしたらヘッダーやナビゲーションを固定・変化させる動きを実装するサンプルコード 5 - NxWorld
一度は見かけたことがあると思う、スクロールしたらヘッダーやナビゲーションを固定表示させたり見栄えを変化させたりする動きをjQueryで実装するサンプルです。途中から要素を固定させたり、スクロールした方向によって表示・非表示を切り替えたりなど全5種類です。使用HTML 特にこのようにしなければいけないというものではないですが、今回のサンプルで使用しているHTMLはいずれも下記のようなもの︵サンプルによってはnav要素がないものもあります︶になっており、このHTMLにあるheaderやnav要素に対してjQueryで処理していくといった感じになります。 <header> ...</header> <nav> ... </nav> <main> ... </main> <footer> ... </footer>
indication 2017/01/12
jQuery

Javascript

Webデザイン
リンク
いま俺たちに必要なのはz-indexの明確な指標だ - Qiita
こんにちは、@armorik83です。こういう煽ったタイトルを書きたいってずっと思っていたので今回やってみます。 z-indexの値付けどうしてる? z-indexの説明は省略しますが、この値は取りうる範囲が膨大1でそれに対する指標が無いことから、複数のWeb設計者が入り混じる場合にバッティングする恐れがあります。1から10までの範囲で収めていた設計者のサイトに100刻みの値付けをするプラグインが導入されると、一気に関係が崩れてしまうことが想像できます。 W3Cではこの値についての明確な指標を載せていないようにみえます。︵調査不足だったらすいません︶広告業界では Web広告業界の展開は日本国内外問わず盛んで、さまざまな手法でうっとうしい広告を載せてきます。この時、元のコンテンツにオーバーレイする形で表示される広告や、マウスオーバーで拡大する広告などが普及してきたことで、2012年にこの
indication 2015/02/12
マテリアルを感じる。

Webデザイン

css
リンク
DISられないUIを作るために最低限守るべき5つの鉄則 - たごもりすメモ
ぼくらが迂闊にUIを作ると、そこにはユーザの正直な目線があり、非常に様々な、そして真っ当な反応がある。曰く﹁わからん﹂﹁まさかそこをクリックするとは﹂﹁不思議な動作﹂﹁独自宇宙﹂﹁モリスUI﹂。反応がもらえるのは非常に良いことだが、何度も何度も繰り返しているとつらくなってくるので、できれば避けたい。分かっている(いた)ことは最初から対応しておきたいものだ。*1 ということで、ここではブラウザで操作する管理画面等のWebUIを作るとき、真っ先に心得ておくべき5つの鉄則を紹介したい。これを守っていてもDISられなくなるというわけではないが、これを守らないと間違いなくDISられるので注意しよう。なおこの記事ではオリジナリティというものについては考慮しない。オリジナリティとか犬に食わせろ。クリックできる場所はcursor:pointerを指定しろこれを忘れるとこの世のものとは思えないくら
indication 2014/07/18
UI

webデザイン
リンク
入力フォームの工夫 - ワザノバ | wazanova
http://googleresearch.blogspot.com/2014/07/simple-is-better-making-your-web-forms.html 1 comment | 0 points | by WazanovaNews ■ comment by Jshiike | 約2時間前今回、Googleのチームが、アイトラッキングシステムの利用やユーザインタビューを通じて、入力フォームのユーザビリティについて実験しています。参照しているのは、2010年にスイスのUniversity of Baselのチームがまとめた "20guidelines to optimize web forms" です。2000年代のアカデミックな研究成果をもとにまとめられたものですが、現在もまだ当てはまるものと、ここ5-10年で変わってきているものがあり、興味深いです。最近は、スマホ
indication 2014/07/15
（UIの観点のみで）ベネッセの入力フォームは良くできている

tips

webデザイン
リンク
グーグルのロゴが変わった？！
わかりました？気づきました？ Google やRedditなど、海外のあちこちのサイトで今話題になっている﹁グーグルのロゴが変わった﹂という話。こちらが数日前までの古いロゴ。そしてこちらが新しくなったロゴ。わかりました？ GIF画像で見るとわかりやすいのでどうぞ。本当だ！﹁g﹂が右に1ピクセル、﹁l﹂が右下に1ピクセルづつ移動してる。前述のサイトのコメント欄には、﹁これは驚いた！﹂﹁めちゃくちゃ変わったな！﹂とユーザーの声が寄せられています。グーグル公式の発表は今現在無いので、真相は謎のまま。本当に変わったのか、変わったならば何があったのか。誰かの陰謀か、企業メッセージか、はたまた全ては都市伝説か。チームにものすごく繊細で几帳面な人がはいってきただけなのか… 謎は謎のままです。 source: imgur ︵そうこ︶
indication 2014/05/27
どうやったら、気づけるのか、まるでわからない

ロゴ

サイト

webデザイン
リンク
実例で納得！シニアが使えないサイトの例 | マミオン有限会社-パソコン・数学研修、法人研修
パソコン教室でシニア層にインターネットの使い方を教えているときほど﹁ああ、ここがもう少し改善されれば！﹂と吠えたくなる時がある。﹁知りたい事﹂﹁申し込みたいもの﹂﹁買いたいもの﹂があってワクワクしているのに、多くの人が、若い人に取っては﹁些細な﹂ミスでサイト上で目的を達成できずに諦めたり、諦めきれないからとサポートセンターに電話して﹁その情報はホームページに載ってます﹂と言われ落ち込んだりしている。今日は大学の公開講座に申し込もうとしている70歳代後半女性の話。ウキウキの申し込み﹁大学の公開講座申し込みたいの。英語をやり直したいのよ﹂といらしたMさん。﹁新聞の折り込みで講座を見たのだけど、ホームページから申し込んでって書いてあって。ホームページを見たのだけどどうすればいいのかわからないけどホームページからしか申し込めないらしいから、やり方教えて﹂とのこと。チラシに
indication 2013/10/04
アクセシビリティの新たなターゲット

webデザイン

ユーザビリティ
リンク
k-0n.com
This domain may be for sale!
indication 2013/09/18
これは使える！

けいおん

webデザイン

サービス
リンク
Google Visual Assets Guidelines - Part 1 - Behance
Google’s brand is shaped in many ways; one of which is through maintaining the visual coherence of our visual assets. In January 2012, expanding on the new iconography style started by Creative Lab, we began creating this solid, yet flexible, set of guidelines that have been helping Google’s designers and vendors to produce high quality work that helps strengthen Google’s identity.
indication 2013/06/07
アイコンデザインについてのあれこれ

google

webデザイン
リンク
日本の伝統色和色大辞典 - Japanese Traditional Color Names
原色大辞典とは原色大辞典は1997年にオープンしたネットの色見本サイトです。9種類の色見本と色に関する各種サービスから構成されています。色見本コンテンツはブラウザで定義されているHTMLカラーネーム、日本の伝統色、世界の伝統色、 Webセーフカラー、パステルカラー、ビビッドカラー、モノトーン、地下鉄のシンボルカラー、国鉄制定の塗装色の9つから構成され、特に日本の伝統色は古来伝わる先人の色彩感覚を現代に伝えるものとして多くの方々から支持をいただいています。文字列と背景色の組み合わせを試せる配色大辞典、規則性のある組み合わせから色を選べる配色パターン。色見本の他にも、今日のラッキーカラー、コトバから色を解析して調合する成分解析、ストライプを生成するストライプメーカー、グラデーションを生成するグラデーションメーカー、あなたの好きな色と色を調合する色調合、サ
indication 2011/11/20
資料

color

色

webデザイン
リンク
CSSのみでテキストにグラデーションやリフレクトをかけるテクニック（ちょっと更新） - くらげだらけ
前回はiOS5のMobile Safariから使えるようになったHTML5・CSSについて前編と後編に分けてご紹介しましたが、そのなかで説明していない小さなテクニックについて少し紹介したいと思います。今回はCSSでテキストにグラデーションをかけるテクニックについてです。前回のWeb App Demoではフッタータブに特殊なWebFontを使ってアイコンを表示させるようにしていましたが、タブがActiveのときに色が変わってエフェクトがかかるようになっています。このエフェクト効果はCSSでテキストにグラデーションをかけるテクニックをつかってやっています。通常、CSSでテキストカラー（colorプロパティ）にグラデーションを指定することはできませんが「:after」擬似クラスや「mask-image」プロパティを組み合わせて使うことでグラデーションのような表現をすることができます。具体
indication 2011/11/14
css

webデザイン
リンク
画像を使わずに見出しを水平線で挟むCSS小技
ちょっと素敵だったので備忘録。CSS で見出しを水平線で囲むテクニックです。本とかでよくある表現方法ですが、これを画像を使わず実装しよう、というもの。クロスブラウザで動作しますので汎用性もありますね。これはいいですな・・・IE6でも7でも実装出来て、背景カラーや画像にも依存しません。demoこんな感じ。よく見かけますが、これをCSSのみで実装するTipsです。 h1 { border-top: 1px solid black; margin:23px 0 0; text-align:center; padding:0; height:24px; } h1 span { position: relative; top: -24px; padding: 0 20px; background:white; }borderを使って実装。h1にborderを付けて位置を下げ、spanで
indication 2011/11/05
css

webデザイン

レイアウト

tips
リンク
無料・商用OK・リンク不要の、やわらかい印象の日本語フォント・はんなり明朝
以前ご連絡を頂いたフォントポ日本語の作者さんから新作のお問い合わせを頂いたのでご紹介。やわらかい印象の明朝系フォント、﹁はんなり明朝﹂です。こちらも商用で利用できるとのことです。なんとも太っ腹ですね・・フォントポ日本語の作成者さんからまたまたご連絡いただきました。いつもありがとうございます:D 商用で利用できる日本語フォントに新しく仲間入りです。かわいいですねーｗきりっとした印象の明朝ですが、こちらは少しふんわりとした印象を与えられそう。明治時代の築地体を参考に作られたそうですよ。利用規約利用規約は当サイトのフォントはすべて無料です。個人・商業用途での利用について特に制限はございませんので、どうぞお気軽にご使用ください。ただし、フォントデータの改変はおやめください。また、フォントの使用によって生じたいかなる結果や損害につきまして、一切の責を負いませんのでご了承ください。
indication 2011/09/06
webデザイン

素材

フォント
リンク
[CSS]金属の質感が美しすぎる、スタイルシートで実装されたボタン
ボタンをクリックするとブルーに輝きます対応ブラウザはSafari5.1, Chromeです。矩形に使用している線状のグラデーション︵数字のボタン︶は他のブラウザでも表示できますが、円錐状のグラデーション︵飛行機のボタン︶はSafari, Chromeのみで美しく表示されます。円錐状の仕組みは﹁radial-gradient﹂を重ねてスタイルしています。
indication 2011/08/23
webデザイン

css
リンク
僕が良く使うウェブデザインテクニック的な色々（サンプルPSD有） | バンクーバーのうぇぶ屋
「Photoshopの使い方が分からない！」なんてお話を聞くことがありますが、大半の方は実際にはPhotoshopというツール自体は使うことが出来ていて、分からないと言っているのは表現の仕方だったり、「他のデザイナーのサイトみたいにいい感じにする方法～」、みたいなのを知りたがっている人が多いように感じています。僕もたまに聞かれることがありますが、デザインするとき意識してることとか、デザインテクニックだとか、そういうのを自分なりに説明したい時って、作り方を一から話すより、やっぱり既に作ってあるPSDのサンプル等を見ながら説明する方が断然早かったりするんですよね（僕が口下手だということもありますが）。サンプルがあって話をするのと、ゼロから作り方をお話するのとでは、教える側の時間も、教わる側の理解力も違ってくるんじゃないかと思うのです。そこで今回は、僕が良く使うPhotoshopでのデザイン
indication 2011/08/15
ボタンやナビゲーション、プログレスバー

Webデザイン

Photoshop
リンク
★iPhone/iPadのホーム画面用アイコンapple-touch-icon.pngをサイトに設定しよう | 編集長ブログ―安田英久 | Web担当者Forum
indication 2011/08/13
iphone

tips

Webデザイン
リンク
少しの手間で大きく変わる、細部にこだわったWebデザインを
2017年6月29日 Webデザイン﹁デザインしてみたけどなんだか物足りない…﹂そんな経験ありませんか？私はよくあります。それで色を変えてみたり、形を変えてみたりと色々試してみるのですが、結局どれもしっくりこなかったり。そんな時は元のデザインにほんの少し手を加えるだけで納得のいくデザインに変わることが多いんです。わずかな装飾で大きく印象を変える。そんな﹁ひと手間﹂に注目してみましょう！ ↑私が10年以上利用している会計ソフト！追記‥Photoshopを使った加工の仕方を記事にしてみました！ » ︻実践編︼少しの手間で大きく変わる、細部にこだわったWebデザインをグラデーションを加える﹁デザインしてみたけどなんだか物足りない…﹂そんな時はわずかなグラデーションを加えるだけで立体感がでて、ノッペリしたデザインを一新することができます。アレコレ装飾するよりもシンプルかつ王道。ヘッダーの
indication 2011/08/02
少しの手間で印象が変わるから大枠がきまったら細部に手を少し入れたほうがよくなるというお話。

デザイン

あとで読む

webデザイン

まとめ
リンク
商用利用も無料、洗練されたデザインのウェブ用UIエレメントのPSD素材 -Design Kindle | コリス
ボタン、スライダー、スクロールバー、フォームの各エレメントなど、ウェブデザインに使用するUIエレメントのPSD素材をDesign Kindleから紹介します。
indication 2011/08/01
著作権表示について調査する必要あり。

素材

webデザイン

フリー素材
リンク
1 2 3 次のページ