意外と簡単！アイコン風Webフォント使ってみたらブログデザインがグッと洗練されたよ！設定方法を紹介 - ラブグアバ
Webフォント導入のきっかけWebフォントを導入しようと思ったのは以下の記事を拝見したのがきっかけでした。 WEBフォントで簡単に！STINGER3の細かいところにアイコンを入れてみた これを見て「わー、細かいけどこういうの素敵！これは私もパクりたい！オマージュしたい！」と思いたち、やってみることにしました。 で、いきなり結果から書くと、こんな風になります。 黄色の○で囲まれたハートやフォルダのアイコン。これが今回導入したWebフォントなのです。 これがフォント？って思いますよね。そうなんです、こういう一見画像（アイコン）風のデザインをフォントだけできちゃうのがWebフォントの優れたところなんです！ あくまでフォントなので拡大・縮小しても画像が荒くなったりしませんし、CSSでの装飾だって可能です。画像じゃないので表示も軽いです。 どうですか？ちょっと興味わいてきましたか？気になってきたら続
CSSでのフォント指定について考える（2014年）｜DTP Transit
結論1：アルファベットでウエイトなしだけでも、すべてのモダンブラウザに対応可能です。ただし、旧バージョンのSafariやFirefoxでは対応がまちまちであったため、それらに対応するには併記します。 游ゴシック体と游明朝体はWinodws 8.1では日本語名、OS X Mavericks（10.9）ではアルファベット名のみの対応であるため、両名の併記が必要となります。 疑問2：「ヒラギノ明朝 Pro」と「ヒラギノ明朝 ProN」のどちらを記述すればいいのでしょうか。 「ヒラギノ明朝 Pro」を改訂し、JIS X 0213:2004の例示字体に対応させたものが「ヒラギノ明朝 ProN」です。 参考： ウィキペディア - ヒラギノ 「ヒラギノ明朝 Pro」と「ヒラギノ明朝 ProN」の違い CSSのfont-family指定はこれで決まり！（2013春） 結論2：新しい字形に対応をしている「ヒ
シングルページなサイトをデザインする上で、知っておいて損は無いかもしれないプラグインとか色々！ | バンクーバーのうぇぶ屋
最近多いですねー、1ページで完結するタイプのサイト。One Page Loveのサイトなんかから、シングルページの事例も大量に見ることが出来ますし、パララックスやらフリップ型のコンテンツやら、なんか色々出てきてて着いて行くのがやっとです… でも実際シングルページをつくろうとすると、え？何これどうなってんの？って物も多くてビビることもしばし。 ってことで、今日は僕が知ってる中で『お、これ、シングルページ作る時に使えるんじゃね？』って物を幾つかご紹介させて頂きます！ 主にはシングルページデザインの表現の幅を広げるjQueryプラグインの紹介になるかなと思いますが、楽しい物も多いので、是非興味があれば試してみてくださいませ〜！ それではいってみましょー！ パララックススクローリング系プラグイン この辺は以前に紹介したことがあるものばかりなので、ぱぱーっと行きます。 jQuery Waypoint
Web初心者だった私がWEBデザイナーになって1年半で勉強したこと・使用しているツールまとめ
プロフィールに記しておりますとおり、私は現在デザイン会社にて働いております。 昨年の3月、5年ほどやっていた「DTP・グラフィックのデザイン・レイアウト業務」から「Web担当」に相なり、日々勉強しながら仕事に臨んでおると言う状況です。 そのちょっと前までHTMLは妖精が書いていると思っていた私にとって、あまりに勝手の違う作業内容。最初は途方に暮れておりましたが、Twitter等で知り合うことのできた先輩Webデザイナーさん達のおかげもあり、現在では自分でWordPressのテーマを作成できるまでに成長することができました。頭を叩くと「ｾﾏﾝﾃｨｯｸ!」と音が鳴るまでになりました。 そんなわけでここいらで一度、自分がDTP→WEB担当になるにあたって勉強したこととか使っているツールとかをデロッとまとめておきたいと思います。 まずは業務をする上で必要不可欠になった言語や、作業効率を上げるために
選ばれるウェブデザインとは
東京ベイ潮見プリンスホテル ”水辺の宿場町”をデザインコンセプトとするアートホテル「東京ベイ潮見... 詳細を見る
Webサービスのイメージカラーを無作為に調べてみた｜インターネット界隈の事を調べるお
昨日、LINEのカンファレンスに行ってきたのですが、ぼんやりと「緑色を見るとLINEって感じだよなぁ」と思いました。これまで緑といえばあの渋谷の会社を連想してたのですが・・・。 他にも、色の組み合わせだけで特定のWebサービスを連想することができるものはあります。クリムゾンレッドだったら楽天とか。そんなわけで、Webサービスのイメージカラー（使用されている色）を調べてみました。なんだかオーラソーマ・カラーみたいです。 サービスはジャンル別に思いついたものを次々と取り上げた感じですので、脈絡がない箇所もあるかもしれません。色はスクリーンショットからのスポイトという地味な作業により調べております。 1、2行目はEC関連ですが、比較的暖色系も使われており、女性を意識したものも多いのかなって。逆に3行目はお堅いサービスなので青系が多い。以外なのがSNSも青系が多いんですね。3行目と4行目は配色が似
デザイン = 感情 + 使いやすさ｜選ばれるウェブデザインとは デザイン会社 ビートラックス: ブログ
近年ウェブデザインに関する様々なテクニックや理論が注目されているが、ユーザーを引きつけるデザインとはなんだろうか。意識してこのサイトのデザインが好きだからと選ぶ人もいるが、大抵の人は無意識に感覚で選ぶことが多い。 私がデザインを勉強していて思うことは、無意識に選ばれるデザインこそが一般ユーザーから見た客観的なユーザビリティを理解したデザインができていると思う。使いやすさはユーザーに選ばれる一番の理由である。 さらに、彼らの心をつかむには感情に訴えるデザインも大切である。論理的に文字で訴えることも大事だが、ビジュアルなどを使って感情に訴えるデザインはサイトを見ている人との距離を縮めることができる大切なポイントである。 選ばれるウェブデザインはいくつかの点に注意すれば作ることができる。その為には今から紹介する９つの基本的なルールと感情に訴えるデザインがキーポイントとなる。 1. ゴールを明確に
有名Webサービスのデザインから考える、上手な料金プランの見せ方 | Goodpatch Blog
複数の料金プランを持つWebサービスを利用する際、皆さんはどういう基準でプランを選びますか？私は自分に必要な機能は何なのか、料金に見合った内容かどうか、他のプランと比較してお得なのはどれなのか等を考えながら検討していきます。そのために一目でそれぞれのプラン内容がわかったり、各プランを簡単に比較できるデザインだと決めやすいのですが、自分にぴったりのプランがすぐにわからないと結局どれも申し込まない、なんてことも。そこで今回は複数のプランを持つWebサービスの料金表を見ながら、どんなデザインをしてユーザーに魅力を伝えているのかチェックしてみたいと思います！ SQUARESPACE http://www.squarespace.com/pricing/ プランを3つ用意しているSQUARESPACEは、おすすめの$16のプランを人気のプランとして画面の真ん中にくるように配置しています。緑背景の”M
フラットデザインのコツ的なアレ - 納豆には卵を入れる派です。
P4Dで教えていただいたエンジニアさんに聞かれたので、なんか整理しきれてなくてざっくりなんですが、取り急ぎ、なんかそれっぽくなるコツみたいなのを独断と偏見でまとめてみました。 3色〜5色くらいの色を画面の中で均等に使うのおすすめ 作りたいサービスが何で色分けできるか考えます。ちょうどよく3〜5種類くらいのステータスやカテゴリなどがあったら、それに応じて色が変わるとかするとうまくハマる。かも。 Flat UI Colorで色選び http://flatuicolors.com/ という便利なサイトがあって、ここから3〜5色くらい選ぶとよいです。クリックするとカラーコードがコピーされます。あら便利。赤は他の色と仲良くするのが難しめ。 Sassで彩度を抑えると落ち着いた色調になって、使いこなしの難易度が低くなります 上のサイトもそうなんですが、Flat UIによく使われている色は、鮮やかなが多く
Em Calculator
About Em Calculator is a small JavaScript tool which helps making scalable and accessible CSS design. It converts size in pixels to relative em units, which are based on a text size. → More JavaScript required I'm very sorry, but this page needs JavaScript enabled browser. If you happen to use tools like NoScript, turn them off please. If you still encounter problems, consider upgrading your brows
「The Non-Designer's Design Book」はエンジニア必読の書籍だった - YAMAGUCHI::weblog
はじめに こんにちは、Python界の情弱です。もうかれこれ5年くらい「僕にウェブデザインのセンスがあったら、いやせめてデザインのセンスがあったらどんなによかったことだろう」と思っていたわけですが、半ば諦めていました。しかし先日同僚の@kotarokパイセンに勧められるがままに「ノンデザイナーズ・デザインブック」を読んだら、これが素晴らしい書籍で、もう一度僕にやれば出来るかもと思わせてくれたわけです。 ノンデザイナーズ・デザインブック [フルカラー新装増補版] 作者: Robin Williams,吉川典秀出版社/メーカー: 毎日コミュニケーションズ発売日: 2008/11/19メディア: 単行本（ソフトカバー）購入: 58人 クリック: 1,019回この商品を含むブログ (102件) を見る 本書が良いのは、多くのデザイン例があり、それも原則の適用後だけではなく、その前後でどれだけデザイ
サービス終了のお知らせ - NAVER まとめ
サービス終了のお知らせ NAVERまとめは2020年9月30日をもちましてサービス終了いたしました。 約11年間、NAVERまとめをご利用・ご愛顧いただき誠にありがとうございました。
レイアウトの基本的な型と、レイアウトからデザインまでの流れ
Webサイトにおいて、レイアウトの基本的な型と、レイアウトからデザインまでの流れを簡単にまとめてみました。 レイアウトからデザインまでの流れを把握しておくと、その間の思考が分断されずデザインがしやすくなると思います。 また、ユニークなレイアウトにするにしても、あらかじめ基本的な型を知っておくと逸脱がしやすくなりますね。 レイアウトに影響を与える要因 レイアウトにはいくつかの型がありますが、まずその型を決定する前に、レイアウトに影響を与える要因を知っておく必要があります。これらの要因によって、レイアウトの型があらかじめ決まったり、レイアウトが大きく変わるからです。 情報階層の深さ →1ページのサイトなのか、第二階層以降ありグローバルナビゲーションが必要になるのか、など サイトの目的・属性 →そのサイトでは何を伝えたいのか。企業・ブランドのメッセージや情報、ユーザーに役立つ知識（Wikiped
今後のWebデザインとの向き合い方
2012年2月25日 CSS Nite in TAKAMATSU vol.6 が開催されました。CSS Nite は、ツールの使い方や制作のノウハウなど、テクニックを扱うことが多いイベントですが、今回は全編を通してコードが出ないという珍しい構成でした。いつもとは少し違う雰囲気ではありましたが、他の CSS Nite にはない満足感を得た方も多かったのではないかという印象を受けました。イベントの様子はTogetterでまとまっているので参照してください。 私のセッションは、Webデザインのウソ・ホント ～ Web らしくデザインするためのヒントと題して、未来を見据えた Web のデザインを行う上で必要な考え方や取り組み方法を紹介しました。 今月はセミナーで登壇する機会が3回もあり、過密なスケジュールでした。準備は大変でしたが、3回を通して一貫としたテーマがあったかと思います。なんとなく「未来
1
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
Designeat: Designing neatly, online and offline
三井住友VISAカードより、EVA style VISA CARD登場。
Index of /