いまさら聞けないCSS font-familyのまとめ
CSSのfont-familyについて調べてみました。そのうちWebフォントが主流になる気がしますがそれまでのまとめということで。 認識誤りがありましたらどこかでつぶやいてください。 １．font-familyとは？ 通常のフォントや太字、イタリック体、斜体など、デザインを統一した複数のフォントをまとめたものを「フォントファミリー」といいます。 「Arial」「Vernada」「ヒラギノ角ゴPro W3」「ＭＳ Ｐゴシック」などがフォントファミリー名です。 このフォントファミリー名を指定するためのプロパティが「font-family」です。 サンプル body { font-family: Verdana,"メイリオ",Meiryo,"ヒラギノ角ゴ Pro W3","Hiragino Kaku Gothic Pro","ＭＳ Ｐゴシック","MS PGothic",sans-serif;
縦や横に長いサイト「高級ペライチ」1度は見ておきたいスクロール演出のまとめ32個！
HTML+CSS+JavaScriptでつくるサイトの定番演出「高級ペライチ」！ HTMLファイ部の「HTML5の鬼」ことほんだです。 カヤック社内では「高級ペライチ」という愛称で呼んでいる縦や横に長い1ページサイト。 スクロールに合わせたパララックスやアニメーションの演出が印象的ですよね。 今回は「高級ペライチ」とググると1位に表示される、 僕のはてブ「高級ペライチ」タグから厳選32サイトを紹介します！ まずは王道！縦に長い高級ペライチ
[JS]プロダクトの一覧表示を1クリックで、リストとグリッドに切り替えるチュートリアル
ベーシックなHTMLとCSSで実装されたプロダクトページの表示をリストとグリッドに切り替えるjQueryのチュートリアルを紹介します。 Building a List/Grid View Switcher with jQuery [ad#ad-2] デモ 実装 デモ 表示の切り替えは、右上のアイコンをクリックで。 デフォルトはリスト表示で、プロダクトのサムネイル、リンク、購入ボタンがセットになっています。 デモページ：グリッド表示 実装 HTML HTMLはそれほど複雑ではありません。 まずは、右上の切替用のアイコンのHTMLです。 <span class="list-style-buttons"> <a href="#" id="gridview" class="switcher"><img src="images/grid-view.png" alt="Grid"></a> <a hr
【インタビュー】クックパッドのUIデザイナー：「エンジニアの仕事が０を１にする仕事なら、デザインは1を100にする仕事 」 | Startup Dating
Startup Datingでインタビュー連載を始めてみることになりました。さて連載の初回は、2011年に新卒としてクックパッドに入社し、現在UIデザイナーとして活躍する片山育美さん（@monja415）。片山さんが現職に就くまでの道のりや、クックパッドのUIに関する考え方、片山さんが手がけた具体的なUI改善の事例やヒントなどをたっぷりお伝えします。 美術大学で勉強、もともと職人になりたかった もともと絵を描くのが好きだし得意、高校のときから職人になりたいと思っていたと話す片山さん。美術大学に進学し、ファイン系とデザイン系でデザイン系を学ぶことを選択。ファイン系とは、絵画や彫刻などいかにも“アート”というもの。ファイン系が芸術だから、どこか自分の中で完結してしまうところがある。でも、職人って誰かのために技術を使える人なんじゃないか、と。情報デザイン学科を専攻し、サービスデザインやUXと言わ
Twitterエンジニアの作ったサイトデザインモック作成ツール「Stylo」:phpspot開発日誌
Open-sourcing Stylo by Alex MacCaw Twitterエンジニアの作ったサイトデザインモック作成ツール「Stylo」。 CoffeeScript, Spine, Sprockets といったテクノロジーを使っているらしいです。 なんかwebkit限定だったりしますが、インタフェースが良い感じに出来ていて、同じようなツールを作るのに参考にすることもできそう。 ツール自体は非常にシンプルで図形を配置して図形をカスタマイズしたり文字を配置したりといったものですが、容易に習得でき快適に動くため素早くモックをブラウザ上で作りたい際に使えそう 単に置くだけじゃなくて、オブジェクトを綺麗に並べるような機能もついており、シンプルだけど、こういう地味に大切なところはちゃんとしています。 Twitterエンジニアが作ったということで、なんとなくインタフェースの印象がBootstr
ウェブデザイナーは知っておきたい、ページレイアウトの代表的な10のパターン
実際のウェブサイトを例に、ずっと廃れないであろうページレイアウトの10のパターンとその特徴を紹介します。 10 Evergreen Website Layouts (that will never go out of style) [ad#ad-2] 下記は各ポイントを意訳したものです。 2カラム、広いヘッダ 3カラム、広いヘッダ フォーボックス 不確定なグリッド 大きいスクリーンショット シングルカラム 打ち出し画像 固定サイドバー グリッドベースのギャラリー マガジンスタイル [ad#ad-2] 2カラム、広いヘッダ これは最も普通のレイアウトと言ってもよいでしょう。広いヘッダが上部にあり、960pxを2カラムにし、一つは広く、もう一つは狭くしたものです。狭い方はサイドバーでナビゲーションなどが設置してあります。 慣習的に、ブログでは広い方の右にナビゲーションを置き、スタティックなサイ
これは使いやすい、美しいCSS3グラデーションのボタンが簡単に作成できるオンラインツール -CssGradientButton
パネル右：グラデーションやシャドウなどの編集 作成が完了したら、コードを下部に生成されます。 生成されるコードは下記のようになっています。 <!DOCTYPE html><html><head> <style type="text/css"> .button_example{ border:solid 1px #819bcb; -webkit-border-radius: 3px;width:150px; -moz-border-radius: 3px;border-radius: 3px; font-family:arial, helvetica, sans-serif; padding: 10px 10px 10px 10px; text-shadow: -1px -1px 0 rgba(0,0,0,0.3);font-weight:bold; text-align: center;
レイアウトの基本的な型と、レイアウトからデザインまでの流れ
Webサイトにおいて、レイアウトの基本的な型と、レイアウトからデザインまでの流れを簡単にまとめてみました。 レイアウトからデザインまでの流れを把握しておくと、その間の思考が分断されずデザインがしやすくなると思います。 また、ユニークなレイアウトにするにしても、あらかじめ基本的な型を知っておくと逸脱がしやすくなりますね。 レイアウトに影響を与える要因 レイアウトにはいくつかの型がありますが、まずその型を決定する前に、レイアウトに影響を与える要因を知っておく必要があります。これらの要因によって、レイアウトの型があらかじめ決まったり、レイアウトが大きく変わるからです。 情報階層の深さ →1ページのサイトなのか、第二階層以降ありグローバルナビゲーションが必要になるのか、など サイトの目的・属性 →そのサイトでは何を伝えたいのか。企業・ブランドのメッセージや情報、ユーザーに役立つ知識（Wikiped
首相官邸サイトリニューアル、しかしすぐに再リニューアルが必要 | 水無月ばけらのえび日記
公開: 2012年4月8日16時40分頃 首相官邸 (www.kantei.go.jp)のサイトがリニューアルしたそうで。 4500万円かかったと報じられていますが、何をやったのかが分からないので、高いか安いかは評価のしようがないですね。単純に規模から「やるべき事」を考えてみると、CMS抜きで4500万円かかっても不思議ではないと思います。戦略をみっちりやったり、それなりなCMSを入れたりすれば足りなくなるかもしれません。 そして実際にサイトを見てみると、まず、見た目だけで以下のような点が気になるわけです。 背景にうっすらと写真が敷かれていますが、肝心な部分がコンテンツの下敷きになってよく見えない上に、「首相官邸」というタイトルまわりが読みにくくなってしまっています。プロがこういう中途半端な写真の使い方をすることはまずありません。写真を見せたいならちゃんと見せるでしょうし、見せなくても良い
デザインする上で要素を目立たせるという事 ｜https://wp.yat-net.com/name
デザインやコンテンツ制作の打ち合わせをしていると必ず出てくる「目立たせる」という行為。 人によって「赤くして」とか「大きくして」と言った抽象的な言葉で表現されますが、僕ら制作者はその言葉をそのままの意味で捉えるわけには行けません。 何故なら、依頼者が何か目的があってそこを赤くする必要がある、大きくする必要があるならばそれを取り入れば良いです。ですが、その目的がその要素を目立たせたいという場合では話が変わってきます。 そうなると、本来の目的は「目立たせること」であって、決して赤くすることや大きくすることが目的では無いため、実際に赤くしたり、要素を大きくしても目立たなければ目的が達成されず満足されることは無いでしょう。 赤くして欲しい、大きくして欲しいと言うのは、依頼した人の中にある目立たせる事に直結したイメージである場合が多いので、実際に何を望んでいるのかを読み取ることが大事です。 1.要所
効果的なナビゲーションを設計する5つの大切なポイント
How To Design Effective Navigation Menus [ad#ad-2] 下記は各ポイントを意訳したものです。 Positon -ポジション Simplicity -シンプル Wording -ワーディング Color -カラー Icons -アイコン [ad#ad-2] Positon -ポジション ナビゲーションをページのどこに配置するかは、非常に重要です。 ユーザーがページを見る際にある特定のパターンがあります。ユーザビリティの大家ニールセンによるFパターンが有名です（F-Shaped Pattern）。これは、ユーザーがページを走査する際、上部と左部に（Fの文字のように）フォーカスを合わせるというものです。 こういったパターンを理解し、それがどのように機能するかを学び、何を期待するべきかのアイデアを得るために使います。数多くのサイトを見て、ユーザーに配慮
習慣になるまでの UI と操作の変化
タッチしてもらうための第一歩 タッチデバイスへの違和感や不安をもっている方はまだ少なくないと思います。 毎日の生活に登場するタッチデバイスの代表といえば、ATMや電車の切符販売機がありますが、処理速度が遅くスクリーンのオブジェクトを触れている感覚はあまりありません。そのせいか、スクリーンを強く押している方をたまに見かけます。また、タッチインターフェイスだけでなく、触れて押すことができる物理的なボタンが用意されている場合もあります。タッチへの不安を解消するための配慮なのかもしれません。 毎日の生活から比較すると、タッチデバイスでスイスイいろいろな操作が出来るというのは、未知の世界に見えてもおかしくありません。操作の仕方が分かる iPad や Galaxy の CM が TV で流れているとはいえ、「本当にタッチでこんなに動くのか」という不安をもっている方もいるはずです。 UI デザインのひと
フォントの基本的な選び方
フォントの基本的な選び方を、備忘録的にまとめてみました。 フォントをどう選んだら良いのかわからない、もしくは選ぶのに時間がかかるという初心者さん向けです。 フォントには、それぞれ書体によって特徴があり、ユーザーに与えたい印象によって書体を選ぶ必要があります。 （それに縛られすぎてもいけませんが…（あえてインパクトを出すために違う印象のフォントを組み合わせたりする）、基本的な選び方として知っておくと良いと思います。） 私は以下の順番でフォントを選んでいます。 恐らく他のデザイナーさんも、この順番だと思います。 1. フォントの系統選び 2. 選んだ系統から、さらに書体を選ぶ 3. 書体のウェイトを決める 4. 字間の調整 さらに具体的な手順を1つずつ説明していきます。 1. フォントの系統選び 日本では、和文フォントと欧文フォントの2つを使います。 また、和文フォントは、以下の4つに大きく分
誰でも1時間でDreamweaverを使ってウェブサイトが作れるようになる動画チュートリアル。 | Last Day. jp
誰でも1時間でDreamweaverを使ってウェブサイトが作れるようになる動画チュートリアル。 最終更新日： 2016/02/05 HTML/CSS, YouTube チュートリアル こんにちは@sayobsです。今日紹介するのはAdobeから発売されているドリームウィーバーを使って誰でもHTML/CSSでウェブサイト(ホームページ)を制作する動画チュートリアルを紹介します。 僕も最初はこの動画を見てDreamweaverの使い方を覚えました。英語ですが、凄く分かりやすいですよ。WordPressで自作テーマを作りたい人にもおすすめのチュートリアルです。 1時間で覚えようPart 1 CSS Layout with Adobe Dreamweaver CS4
ロゴの扱い方でプロとアマの差が出る。アイソレーションゾーンとレギュレーション・ビジュアルアイデンティティについて / Maka-Veli .com
Webサイトを眺めていると、よくロゴの扱い方が雑な物をよく見受けられます。どうもWebの場合はそれが多く見られる気がします。「印刷をしない」 からでしょうか？僕も当時、よく叱られてました・・・ アイソレーションゾーンとは アイソレーションゾーンとは、ロゴ等の周りにある『余白』の事です。 ロゴ周りでなくても、キャッチコピーやタイトルの周りに取ることが多いはずです。 タイトルやキャッチコピーなどの場合は、 ジャンプ率を高めに設定する場合は2~4倍くらいでも良いと思います。 逆にジャンプ率を低めに設定した、あまり強調を必要としない場合でも、 1つ分くらいは空けるとすっきりしますね。 スペースを上手く使える人はプロデザイナーっぽいですよね。 ホワイトスペースは「無駄」じゃありません。 隙間があるからといって、あれこれ詰め込むのはいかにも素人っぽいです。 ロゴレギュレーション 大
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
Responsive Web Design JP（日本国内の秀逸なレスポンシブWebデザインを集めたギャラリーサイト）
イラレアイコン
UIデザイン
https://design-spice.com/2012/06/13/responsive-web-design-image/
layer8.sh