デジタル時代の横書き明朝体「TP明朝」 「アルドノア・ゼロ」が採用、ディスプレイにも文学的なたたずまいを
「明朝体をもう一度日常に」――Webサイトやデジタルデバイスの普及で見かける機会が減っている明朝体。今の時代に適した新たなスタンダードを目指し、「AXIS Font」を手がけるタイププロジェクトが開発したのが横組みに特化した「TP明朝」だ。なぜ今、あえて明朝体なのか。生みの親の鈴木功社長に聞いた。 明朝体とゴシック体、逆転する存在感 明朝体は、毛筆の楷書体が様式化された書体で、ゴシック体と並ぶ基本スタイルの1つ。基本的な地の文の書体として広く使われてきたが、縦の線が太く横の線が細い、縦書きの視線運びを意識した形式であることから、デジタル化の進展とともに利用シーンが減っている。Webの日本語表示はゴシック系がほとんどだ。 鈴木社長は「以前はカジュアルなゴシック体が脇役的な使われ方をしていたのに、現在は逆転している印象。スマホやPCが基本の若い人たちにとっては、もはや見慣れないフォントになって
2014年上半期、日本語の 新作フリーフォントのまとめ -商用サイトだけでなく紙・同人誌の利用も明記！
2014年にリリースされた漢字・ひらがな・カタカナが使える日本語のフリーフォントを紹介します。 使えるフォントのバリエーションが増えると、デザインの幅が広がりますね！ 最新版を公開！フォントの数が大幅に増えています。 2019年用、日本語のフリーフォント 366種類のまとめ 各フォントの個人商用利用、同人誌など各種印刷物での利用、ライセンスを明記しました。ご利用の際にはライセンスを必ずご確認ください。 源ノ角ゴシック（Source Han Sans） 個人・商用利用無料（Apache License 2.0）、同人誌や各種印刷物なども可。 Adobeによる4番目のオープンソースフォントで、日本語・韓国語・中国語（繁体/簡体字）など複数の言語、50万のグリフに対応したサンセリフゴシック体。ExtraLight, Light, Normal, Regular, Medium, Bold, He
CSS(スタイルシート)の基本、小技、テクニック総まとめ
CSSの基本や使える小技テクニックなどを幅広くまとめました。以前書いて今もそこそこアクセスがある「CSSの知識をもっと深める30+2の小技テクニック集｜Webpark」という記事があるのですが、2年近く前の記事ですしパワーアップさせて作り直しました。 恐らく過去最長の記事ですので目次を作りました。クリックするとするりと移動します。基本的な内容が多いですが、お役に立つ項目があればうれしいです。 ということで順番に説明していきます。 1. 全般的なこと 1-1. CSSリセット ブラウザごとでデフォルトのスタイルは異なっています。その違いをそのままにしておくと、後でブラウザ間の表示の違いに悩むことになり、どこが原因か分からないとイライラしてしまいます。 そんなことのないように、いったんデフォルトのスタイルをリセットしてしまおうというのがリセットCSSです。 方法は色々ありますが、個人的には一番
はてなブックマーク開発ブログ
いつもはてなブックマークをご利用いただき誠にありがとうございます。はてなブックマーク開発チーム、ディレクターの id:yone-yamaです。 はてなブックマークにて、深夜にサーバーの計画メンテナンスを行います。 メンテナンス中は、ブラウザ版、アプリ共に、サービスの閲覧やブックマーク機能などの利用に影響がありますのでご注意ください。 メンテナンス予定期間 2024年2月2日(金) 深夜 1:30〜3:00（合計1時間半） メンテナンス中に影響を受ける機能 ブラウザ版・アプリともに、以下の操作が行えないタイミングが発生します。 新規にブックマークされたページのタイトル・概要の取得 ドメイン変更に伴うブックマークの移行 お気に入りユーザーの追加と削除 マイホットエントリーの更新 マイホットエントリーの新規利用開始 ブックマークの追加・編集・削除 コメント一覧ページでのエントリータイトルの編集
なぜAmazonのメガドロップダウンメニューはスムーズに操作できるのかという秘密
日本のAmazonでも採用されているメガドロップダウンメニューについて、なぜAmazonのメニューはユーザーが使いやすくできているのかという秘密が明らかになりました。ユーザビリティを改善することが至上命題のネットショッピング系サイトにとっては非常に有益な知識となっています。 Breaking down Amazon’s mega dropdown - Ben Kamens http://bjk5.com/post/44698559168/breaking-down-amazons-mega-dropdown まずこれがAmazonの左上にあるカテゴリーを一覧化したメガドロップダウンメニュー。日本のAmazonにも同様のメニューが採用されており、マウスカーソルを上に持っていくと実にスムーズに動きます。 通常のメニューの場合、以下のようにして少し遅れてサブメニューが開くようになっています。 な
【ブロガーから】はてブリニューアルではてブ数激減w 500ブクマ級→260、次の日9ブクマ | Data
はて、はてなブックマークのデザインがリニューアルされて１日経過したが、早速はてブが付きにくくなっているようだ。 リニューアルがされたのは1月8日、僕の記事が7日にバズり、7日の時点で260ブクマ程付けていただいていた。 この記事：マクドナルドの”60秒ルール”批判が好都合なマーケティングかもしれない件 社会カテゴリに入っていたので、 ７日の夜は上から２番目という好位置にエントリーされていた。はて、はてなブックマークのデザインがリニューアルされて１日経過したが、早速はてブが付きにくくなっているようだ。 リニューアルがされたのは1月8日、僕の記事が7日にバズり、7日の時点で260ブクマ程付けていただいていた。 この記事：マクドナルドの”60秒ルール”批判が好都合なマーケティングかもしれない件 社会カテゴリに入っていたので、 ７日の夜は上から２番目という好位置にエントリーされていた。 何回かホ
色カラー | 色彩とデザインのホームページ
色と色が組み合わさることによって様々な変化が起きます。また、色と何かが組み合わさると新たな出会いや発見が生まれます。色カラーは色と関わりのある情報をお届けするサイトです。色の組み合わせを楽しみましょう。 今のオススメ 配色検索！キーワードから作る配色 季節の色彩！3月のイメージ配色 季節で変わる好きな色と嫌いな色 この色が好きな人はこの色が嫌い 男性と女性で異なる色彩嗜好 迷いを解決！効率的な色の選び方 カラー講座 色の知識を広げよう！色の影響力の考察 色カラーで学ぶ色彩のこと。何気ない日常に変化を与えてくれるのが色です。色が持っている性格や色の印象が与える影響などを知っていると、日々が楽しくなります。 色彩感覚：色と心の関係 いま笑顔は何色に見えますか？ 色のイメージは経験や体調、性格、天気、流行、文化など様々な要因によって左右されます。また、同じ色でもその時々によって感じる感覚は違って
配色で見るWEBデザイン-ワインレッド編 | Qrious Lab.
WEBサイトの印象は、キーカラーによって大きく変わる。世界のWEBサイトをカラー別に集めてみたいと思う。その第二回目は「ワイン：えんじ色、あずき色、赤紫色」。赤のようなピンクのような紫のような、どこに入れてもおかしくない色だが、敢えて他のカラーから独立させた。感性を刺激する色だが、あまり女性が好む色ではないようだ。落ち着いた感じや高貴な感じ、大人の男性やミドルクラスをターゲットにしたサービスや商品に使われているイメージがある。これって紫じゃないの？って思う色もあるだろうが、感覚的なものなので多めに見て欲しい。
配色で見るWEBデザイン-イエロー編 | Qrious Lab.
WEBサイトの印象は、キーカラーによって大きく変わる。世界のWEBサイトをカラー別に集めてみたいと思う。その第四回目は「イエロー：黄色」。黄色は知性を意味する色で人に喜びを与える色。心を弾ませ、楽しい気分にさせてくれるカラー。集中力や判断力、記憶力を高めるたり、一般的には注意喚起をうながす色としても利用されている。視認性があまり良くないレモンのような明るいものから、オレンジに近いものまで幅広く、背景色としてもよく使われているイメージがある。
最低限覚えておきたいWEB配色の基本２大原理と６つの配色パターン
ユーザーに届ける価値を徹底的に追求する マーケティングを提供します © Copyright 2022 バズ部. All rights reserved. WEBサイトのデザインは、誰もが頭を悩ませる部分だ。 「どういう配色なら良い印象を持ってもらうことができるのか？」「どのレイアウトならコンバージョンが上がるのか？」など、様々なところまで考えを張り巡らさなければいけないからだ。 そこで本日は、The Art of Color Coordination というインフォグラフィックをご紹介する。これを見れば、WEB配色の基本の２大原理と、今すぐに使える６つの配色パターンがすぐに分かる。 そして、初心者でも、統一感のある配色のWEBサイトを作るための大きな助けとなるはずだ。 WEB配色の２大原理と６つの配色パターン画像を拡大して表示する ※追記：インフォグラフィックの最後のクレジットの部分が途切
無料で商用利用可能なスタイリッシュかつシンプルなフォントいろいろ
グラフィックデザイナーやウェブデザイナーの仕事をしていると、使い勝手のよいフォントというのは重宝するものですが、シンプルで美しいデザインのフォントというのはなかなか見つからないもの。というわけで、今すぐに商用でも無料で使えるスタイリッシュなフォント42種類は以下から。 A Collection Of 41 Fonts With Free For Commercial Use License http://designresourcebox.com/a-collection-of-41-fonts-with-free-for-commercial-use-license/ ◆01.Aaargh Aaarghとはうわ～！という意味。 ◆02.Aldo ◆03.Aller フランス語で「行く」という意味のフォント名。 ◆04.Alte Haas Grotesk ちょっとレトロな感じのフォント。
faviconを超簡単に作成できるサイト「Dynamic Drive – FavIcon Generator」
年の瀬も押し迫ってまいりましたね。どうも、@OZPA です。 さて、気がつかれた方もいらっしゃるかもしれませんが、最近ブログのfaviconを変更いたしました。 そんなわけで、icoファイルの用意を容易にしてくれたサービス「Dynamic Drive」の「FavIcon Generator」をご紹介。 参考：Dynamic Drive- FavIcon Generator favicon用の画像を用意 まずはfavicon用の画像を用意します。 やだ・・・かわいい・・・！ 画像ファイルはgif, jpg, png, bmpのどれかにしておきましょう。 画像の用意ができたらDynamic Drive- FavIcon Generatorへ移動。 英語のサイトですが、使い方はめがっさシンプルです。 ご覧のとおり、画像を選択、必要な場合はOptionにチェックを入れて「Create Icon」ク
CSSでレイアウトするなら絶対覚えておきたい配置のルール：フロートや絶対配置、z-index とかいろいろ
最近改めて CSS の基本、要素の配置、レイアウトについて学習しました。過去に CSS でのレイアウトなどの記事を書いた事があるんですけど、改めて勉強してみたら、いろいろ間違えて解釈していたなー ... っていうか、基本が分かってなかったんだなーと反省 ...。今回は CSS の基本中の基本、視覚整形モデルについてまとめてみました。 Webデザインをする上で、必須とも言えるのが CSS …。このブログ – Webデザインレシピでも、過去に CSS について書いた記事がいくつかあります。最近 … でもないけど、以下のふたつは CSS でのレイアウトについて、いろいろと書いた記事でした。 CSSでレイアウトするなら絶対覚えておきたいブロックレベル要素のクセとかいろいろ – 2011年 6月17日 CSS：初心者の頃にハマったスタイルシートのあれこれ … IE7多め -2011年 4月21日 で
HTML/CSS テンプレート集まとめ - Cube Lilac
サイトのデザインを変更しようかと思ったのですが，自力でデザインを考えるのは限界があるのでフリーの HTML/CSS テンプレート集をざっと探してみました．尚，どのサイトが人気なのか分からなかったので，各種ソーシャルメディアのカウントを取得して併記してみました．海外サイトばかりなので，SBM としてははてなブックマーク以外に Delicious のカウントも取得しています． 掲載されてあるデザインはまったく見ずに，サイトの使いやすさ（と言うか「広告の少なさ」かな）だけからの感想ですが，個人的には http://www.solucija.com/ が使いやすいかなぁと言う気がしています． URL Delicious Hatena Twitter Facebook 1 http://www.oswd.org/ 24,170 951 471 1,002 2 http://www.freecsste
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
吹き出し素材専門サイト「フキダシデザイン」
新着記事
ダウンロードしておきたいフリーのデザインフォントのまとめ -2012年5月
レトロちっくなデザインがかわいいフリーの日本語・英語フォントのまとめ
新着記事
日本の伝統色の名前を一覧できるサイト | ライフハッカー・ジャパン
