ズルいデザイン（2）：SassやCompassを使って、ズルいデザインテクニック (1/2) - ＠IT
SassやCompassを使って、ズルいデザインテクニック：ズルいデザイン（2）（1/2 ページ） SassやCompassを使って、少ない手間でちょっといい感じに見せる小ズルいTipsを紹介。グラデーション、角丸のお手軽かつ効果的な使い方とは？ シリーズ第2回、前回に続き、今回もSassやCompassを使って、少ない手間でちょっといい感じに見せる小ズルいTipsを紹介します。 今回は、グラデーション、角丸のお手軽かつ効果的な使い方について解説します。 （注）このページでは、個々のデザイン要素を分かりやすく説明するために、実寸サイズより画像を拡大して使用しています。 1: ズルいグラデーション CSS3ではグラデーションを扱えるようになったことから、画像を使わずに自在にグラデーションを描画して、CSSだけでよりリッチなビジュアル表現が可能になりましたが、一口にグラデーションといっても、う
デザインをちょっと素敵にするサンプル 8
先日 HTML5 + CSS3 で書かれた、素敵な雑誌の表紙みたいな Webサイトを見つけました。それ以来、CSS3 だったらコレもできそう ... アレもできるかも ... なんてことを、雑誌のデザインなどを見ながらひとり盛り上がってます w まだまだ IE では CSS3 が使えないけれど、今回はいくつか CSS3 のサンプル作りに挑戦してみました。 まるで雑誌の表紙のようなデザインで、とっても感動してしまいました。HTML5 と CSS3 で書かれていて、ブロック要素、内包するテキストも斜めにレイアウトされています。細いテキストを斜めにすると、とても読みにくくなってしまうんですけどフォントも工夫されてて判読性も十分です。 もちろん IE では斜めではなくて水平に表示されてしまうんですけど、それでも閲覧するのに困らないようなハイブリットなデザインで、またまた感動！ これから近い将来、C
UXを学ぶならこれだけは目を通しておけ！ - UX-design
2013-04-11 UXを学ぶならこれだけは目を通しておけ！ UXとはなんぞや!?って日々思いながら手探りでUXを意識したサービス開発、UXの向上を測っております、どうも @tacumacy です。 ボク自身、UXのことはなんとなーくわかってはいましたが、本格的にそれを仕事としてやろうとなった時から本気で勉強しなきゃやばい！と思い猛烈に危機感を感じたので、めちゃくちゃネットサーフィンをしてUXに関する情報を集めては読みまくりました。そこでボクが読んで参考になった書籍や記事を、どうせならここでまとめて見れるようにしておこうと思います。もし勉強したいな、と思ったときに見ていただけると幸いです。 こんな人に読んでほしい ・これからUXを学びたいと思っている人 ・UXについて、手っ取り早く情報が欲しいと思っている人 書籍紹介 以下、これだけは頭に入れておきたいなぁと感じた内容をまとめてくださって
CSSでレイアウトするなら絶対覚えておきたいブロックレベル要素のクセとかいろいろ
Webデザインをするときに、必ず使うスタイルシート。思うようなレイアウトを作るために、チェックしておきたいブロックレベル要素や、インライン要素のクセみたいなのをまとめてみました。後半はスタイルが反映されない原因のひとつ、スタイルの優先順位についてです。 Attention 記事公開時からいろいろと勉強して、この記事内で紹介している事柄で、間違った解釈をしていたなーと気がつきました。 この記事の中でいくつか追記してありますが、詳しくは、新しく書いた 11月7日の記事：CSSでレイアウトするなら絶対覚えておきたい配置のルール：フロートや絶対配置、z-index とかいろいろ を読んでみてくださいね！ New Post Webサイトをデザイン、レイアウトするのに欠かせないのが CSS（Cascading Style Sheets、スタイルシート）ですね！今では CSS3 が話題を集めていて、CS
CSSの変化をアニメーションさせるtransitionについてまとめたよ。（CSS おれおれ Advent Calendar 2012 – 22日目） | Ginpen.com
CSS おれおれ Advent Calendar 2012 – 22日目 (ヽ´ω`) oO( また日が昇ってからの更新になってしまった……。 ) 前提：CSSにおけるアニメーションは以下の二種類あります。 Transitions … 変化するもの Animations … 動き続けるもの 今回は前者について取り上げます。後者もいずれ。 概要 transitionは値の変化をアニメーションさせる、という事を指定するものです。 例えば青色をしたリンクにマウスカーソルを乗せると赤色になる、というような場面で、その変化を時間を付けて行わせる事ができます。 常に動き続けているようなアニメーションは、animateの方の領分です。 使える場面 あくまで「変化」を対象にしているため、何らかの（主に利用者の）操作が必要です。 なので、変化する状態を示す擬似クラス（:hoverとか）や、JavaScrip
テキストのメリハリをつける方法7つ
私のデザイン修正で一番多い指示が、「メリハリをつけてください」で、以前はどうすれば良いかわからず困っておりました…。(今も時々わからなくなりますが…) 最近ようやくどうすればメリハリがつくかわかってきたので、その方法をまとめてみました。 「メリハリをつけてください」の修正意図は、目立つべきところが目立っていないので、重要な部分を視覚的にはっきりさせてください、ということだと思います。 例として、以下のような見出しとテキストをもとに考えてみます。 （メリハリをつける場合、サイト全体のバランスをみてつけることが必要ですが、ここではわかりやすくするため、見出しと説明文のみで考えています） （引用：Wikipedia: カメラ http://ja.wikipedia.org/wiki/%E3%82%AB%E3%83%A1%E3%83%A9） 私の場合、メリハリをつけるのは以下7つの方法が多いです。
寸法と解像度のチートシート
その他の寸法 ハガキ … 148 mm × 100 mm (A6 より横が 5 ％程度短い) 名刺 … 91 mm × 55 mm (B8 より横が 1 割程度短い) レター … 279 mm × 216 mm (A4 より縦が 1 割程度短く，横が数％長い) 新聞 … 開いた状態で 813 mm × 546 mm (A1 に近いが少し小さめ) クレジットカード … 85.6 mm × 54.0 mm 磁気カード … 85.0 mm × 57.5 mm テレホンカード … 86.0 mm × 54.0 mm CD … 直径 120 mm (穴は直径 15 mm，印刷可能範囲は直径 46 〜 116 mm の範囲) 証明書の写真の寸法 パスポート … 縦 4.5 cm × 横 3.5 cm 履歴書，TOEIC … 縦 4 cm × 横 3 cm TOEFL，英検 … 縦 3 cm × 横 3
Photoshopを使いこなすための印象的なチュートリアルいろいろ
Photoshopを使えばここまでの作品ができる、ということがよくわかるチュートリアル集が「35 New Photoshop Tutorials with Various Techniques」です。アイコンからSFっぽいイラストまで、さまざまなジャンルにおける作品のメイキングが公開されており、技術が学べるだけでなく、こんなラフスケッチからここまでの作品が……！と製作過程を眺めているだけでも楽しめます。 35 New Photoshop Tutorials with Various Techniques | The Design Inspiration ◆Photohop Tutorial Link: A Cute Cartoon Artwork Creation 鉛筆でのスケッチはこんな感じ。 スケッチをスキャンし、Photoshopを使って着色していきます。 完成作品はこちら。 なお、
ロゴ作成に困ったときに使えそうなロゴ自動生成サービス「Logaster」
【ゆっくり解説】「遂に目を覚ました…」日本の第６世代戦闘機F Xの正体に世界中に震撼！！【ゆっくり軍事プレス】
サービス終了のお知らせ - NAVER まとめ
サービス終了のお知らせ NAVERまとめは2020年9月30日をもちましてサービス終了いたしました。 約11年間、NAVERまとめをご利用・ご愛顧いただき誠にありがとうございました。
リッチに見せるデザインテクニック。Appleのデザインのように美しい金属調の質感を表現する方法。 (フェンリル | デベロッパーズブログ)
こんにちは、イメージ担当の長谷川です。 今回は Apple がデザインしている iCloud アイコンのような美しい金属調の質感を Fireworks で表現してみました。 アレンジ次第で水平のエッチングやブラスト加工のようなイメージも簡単に作ることができます。 ぜひ Web や UI デザインの参考にしていただければと思います。 1. ベースのテクスチャを設定する まずグラデーションの設定をします。 長方形ツールで作成するボタンなどのサイズより少し大きいサイズの四角を描き、グラデーションの塗りを円錐にします。 以下のように白とグレーを交互に設定します。右端と左端を同じ色にしないとグラデーションに線が出来てしまいますのでご注意ください。 ここでは濃いグレーを #666666、両端の薄いグレーを #999999 に設定しています。 次にノイズを適用量：10で追加します。これが同心円状のヘアラ
Web制作に携わる人は見ておくべき、2011年のはてブ1500数以上の良記事31選 | URAMAYU
2011年のWeb制作トレンドをはてブのホットエントリから振り返ってみました。 2011年でトレンドは、スマートフォン向けサイトやアプリの制作関連、HTML5関連、あとはFacebook対応のためのノウハウといった感じでした。 はてなブックマーク「コンピュータ・IT」カテゴリ内で、1500以上ブクマがついた記事を選出、その中からさらに私の主観も入りつつ、2011年Web制作系のエントリーの中でもベストな31記事をピックアップ、Webデザイン系、SEO系、HTML+CSS系、プログラミング系、スマートフォンサイト制作系、企画、ツール、その他系、素材系にそれぞれ分類しました。 Webデザイン系 1. 色彩センスのいらない配色講座 配色と色についてひじょーに分かりやすく、論理的に解説されたスライド。はてブ数ダントツ。 2. デザインの基礎力をワンランクアップしたい私（Webデザイナー
配色初心者でも効果的なカラーデザインが出来るようになる4つの工程 / Maka-Veli .com
タイトル間違えました。 「僕みたいなクソデザイナーが配色する時に騙し騙しデザインする手法」です。 配色には色々作法があります。そして言葉もあります。加法、減法、色の三属性、伝統、政治的意味合い、などなど。厳密に出したらキリがありませんし、プロじゃないので、細かい事は抜きにして、個人的に抑えておく簡単なポイントをまとめてみました。 雰囲気のキーワードを出す なんとなくのキーワードを出します。 カッコイイ！ うぉ！すっげ！って感じ クール とにかく渋く。鳥肌立つ感じで 可愛いっぽく。 やっぱ少し可愛くが良い ラブリー♡ もうワクワクーって感じで♥ シンプルに。 余計な物はいらん インパクトどーん とにかく覚えてもらいたい！ 爽やかーーー キレイに見せたい！ 楽しい！ ﾁｮｰﾊｯﾋﾟ ｽｰﾊﾟｰﾊｯﾋﾟ ﾉ…(ry など。 ここで決めたキーワードがベースになります。 常に頭に入れてお
Youtubeの動画を背景に
Introduction In the ever-evolving landscape of web browsing, staying abreast of the latest technologies is crucial. HTML5, the fifth and current version of the Hypertext Markup Language, has revolutionized the way we experience the web. With its advanced features and enhanced capabilities, HTML5 has become the cornerstone of modern web development, offering a more seamless and interactive user exp
素人っぽいデザインから脱却するための12のデザインチップス | webox blog
クオリティを上げるためにはちょっとした「こだわり」がとても大事です。 定期的に話題になるネタで恐縮ですが、素人っぽいデザインにならないように個人的によく使ってる小技をまとめました。 上のものほど、簡単で多くのデザインに使える小技になります。 1pxのボーダーを使う 1pxの効果を使うのと使わないのでは、デザインの質に大きな違いが生まれます。 ある意味Webデザインでは一番重要な要素かもしれません。 定番です。たった1pxのボーダーをつけるだけでシャープな印象になります。 ただ塗りつぶしただけ、グラデーションを入れただけのボタンでは、のっぺりとした感じになりやすいですが、1pxのボーダーを上部に入れるだけでシャープな立体を表現できます。 正確には1pxでなく2pxですが、こうして黒系のボーダーと白系のボーダーを並べることで、明確にかつシャープに仕切りを表現できます。 1pxのドロップシャ
ずっと使えるデザインテクニック。すっきり美しく見せる『余白』と『文字』の使い方。
こんにちは、デザイナーの長谷川です。 今回は僕が普段気をつけている、ちょっと意識するだけでスッキリしたデザインになるレイアウトのコツをご紹介します。 デザイナーじゃない方も、企画書や簡単な UI のモックアップ、Web や雑誌のレイアウトなどに応用できると思いますので、ぜひ参考にしていただければと思います。 1. 上下左右のマージンを均一に Web デザインや UI デザインの要素全てに対して隣り合う要素との間隔やバナー、ボタンなどの外側と内側の要素の上下左右マージンをできるだけ均一にすることで、デザインがスッキリ見えます。 2. 内側のマージンは外側のマージンより狭く レイアウトなど一番外側とコンテンツの間隔より文章のかたまりや画像同士の間隔を小さくします。基本的にコンテンツのまとまりを作るためですので、デザインによっては広く取って区分ける場合もあります。 3. 段落の下は間隔を広く開け
少しの手間で大きく変わる、細部にこだわったWebデザインを
2017年6月29日 Webデザイン 「デザインしてみたけどなんだか物足りない…」そんな経験ありませんか？私はよくあります。それで色を変えてみたり、形を変えてみたりと色々試してみるのですが、結局どれもしっくりこなかったり。そんな時は元のデザインにほんの少し手を加えるだけで納得のいくデザインに変わることが多いんです。わずかな装飾で大きく印象を変える。そんな「ひと手間」に注目してみましょう！ ↑私が10年以上利用している会計ソフト！ 追記：Photoshopを使った加工の仕方を記事にしてみました！ » 【実践編】少しの手間で大きく変わる、細部にこだわったWebデザインを グラデーションを加える 「デザインしてみたけどなんだか物足りない…」そんな時はわずかなグラデーションを加えるだけで立体感がでて、ノッペリしたデザインを一新することができます。アレコレ装飾するよりもシンプルかつ王道。 ヘッダーの
スマートフォンサイトをデザインする上で知っておくべき10のTIPS
スマートフォンサイトをデザインする上で知っておくべき10のTIPS iPhoneやAndroidのスマートフォンの仕様を知らないけどデザインしなくちゃいけなくなったというデザイナーさんに知っておいてもらいたい10(+1)のTIPSです。 1.実機で確認する 当たり前のことですが作成したデザインを実機で確認して下さい。スマートフォンとPCでは目からの距離やDPIが違いますので、PCでは十分に見れたからといって実機で確認すると文字が小さすぎることなどがよくあります。書きだしたJPGをFTPでアップして確認してもいいですし、メールでスマートフォンに送って確認してもいいです。個人的にはDropboxで転送するのが手軽でおすすめです。 2.横幅は320pxもしくは640pxでデザインする スマートフォンでは基本横幅が320pxで表示されるのでデザインする際も320pxでデザインしましょう。ただ、Re
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
Web制作に役立つツールをまとめている・「WebPlatformTools.org」
新着記事
