絵文字を支える技術について｜nona
はじめにこちらはmhidakaが建立したAdvent Calendar Day.3となります。 こんにちは、はじめまして、のなと申します。mhidakaさんのTweetを見つけて、初めてAdvent Calendarなるものを書いています。なにかお作法間違っていたら大目に見てください、よろしくお願いします。 軽く自己紹介をさせていただくと、普段はGoogleでAndroidのTextまわりの開発を行っており、DroidKaigiやShibuya APKで発表させていただいたりしています。最近はほぼ絵文字の話しかしてないので、絵文字おじさんと思われてそうですが、普段の仕事は絵文字に限らず、Androidの文字表示の部分は大抵面倒をみています。 今回この機会をいただいたので、どんな内容を書こうか迷ったのですが、やはり皆が読んで面白い内容というと、絵文字になるのかなぁ、ということで性懲りもなく絵
文字詰めできるCSSのfont-feature-settingsが凄い！ 日本語フォントこそ指定したい自動カーニング - ICS MEDIA
游ゴシックではプロポーショナルメトリクスは効果的 WindowsやmacOSに搭載されている游ゴシック体は、仮名が漢字に対してかなり小さめにデザインされています。游ゴシック体ではヒラギノ書体より字間が開いて見えてしまうため、プロポーショナルメトリクスを活用する効果は大きいです。 Webフォントにもプロポーショナルメトリクスは効果的 デバイスフォントだけでなく、Webフォントでもプロポーショナルメトリクスに対応したOpenTypeフォントがたくさんあります。Webフォントに関しては記事「Webフォントサービスの徹底比較！ 和文フォントが使える5つのサービスの利点まとめ」を参考ください。 ▲左側は未指定（和文等幅）の状態でカタカナの開きが大きい。右側はプロポーショナル字形を適用した状態で、カタカナが詰まっている。 対応環境：ほぼすべてのブラウザで利用可能 これだけ便利なCSSですが、どれだけの
まだ画像テキスト使ってるの？ アクセシビリティとSEO両立のベストプラクティス
かつて私たちは、画像テキストを表示するために「text-indent: -9999px;」なんてCSSを書いていました。でも、いまならもっといい方法があります。いまどきのベストな方法と、それが使えないときの解決方法を。 以前掲載された『いくつ覚えてる？いつか役に立つかもしれないCSS画像置換の手法と歴史』の中でBaljeet Rathiが紹介しているたくさんの画像置換テクニックは、どれを取っても見事に工夫されています。すべてのテクニックは、人と検索エンジンの両方に対するアクセシビリティを保ちつつ、テキストコンテンツをWeb上でいかに美しく芸術的に表現するか、という課題に焦点を当てていました。Webデザインの世界におけるこの目標を、今日手軽に使えるカスタムフォントやパワフルなCSSツールなしで達成するのはまさに偉業でした。 Rathiの記事にヒントを得て、次の課題を挙げてみました。 画像変換
【2016年版】ウェブ制作を快適にする、知っておきたい無料オンラインツール50選
2016年にリリースされた、ウェブデザインの制作時間を節約できる無料ウェブツールやアプリをまとめてご紹介します。インストールなどする必要もなく、ブックマークしておけばいざという時にも便利です。 今回は、デザインツールを以下のカテゴリーごとに分けています。お気に入りのツールを見つけてみてはいかがでしょう。 コンテンツ目次 1. Web タイポグラフィー関連ツール 2. 配色カラー関連ツール 3. Web ベース CSS 関連ツール 4. レスポンシブ・ウェブデザイン関連ツール 5. ウェブパフォーマンス関連ツール 6. オンラインチェックリスト、ガイド、参考リファレンス 7. 画像イメージ関連ツール & 編集エディター 8. ウェブデザイナー向けお役立ちディレクトリ 8. その他ツール Web タイポグラフィー関連ツール Type Anything ウェブサイトで利用したいフォントを試すこと
任意のWebサイトでどのような技術やサービスが使われているかを調査できる・「LargerIO」
LargerIOは任意のWebサイトを調査するWebツールです。URLを指定すると、そのWebサイトで使われている技術やサービス、例えば、jQueryやModernizrなどのJavaScroptフレームワーク、Google FontやFont Awesomeなどのフォントサービス、PHPやRubyなどのプログラム言語、WordPressやDrupalなどのCMS、ApacheやNginxなどのサーバー、といったように従来の調査ツールで調査できる項目は勿論、CKEditorといったリッチテキストエディタやThinkPHP、Pure CSSなどのフレームワーク、mod_pythonやmod_wsgiといったサーバーエクステンションを使っているか否か、TwitterやFacebookなどのSNSで提供されるウィジェットを使っているか等、細かいところまで調査できるようになっています。 全世界の技
冬のデザインに取り入れたいフリーフォント10選|haconiwa
あたたか～い！ぬくもり伝わるフリーフォントたち こんにちは。Keinaです。 寒くなってきた今日このごろ、そろそろクリスマスや年賀状のデザインなど、 アイデアを練っている方も多いのではないでしょうか。 季節が変わり、服の衣替えするように、フォントも衣替えしてみませんか。 きょうは、最近発掘した、 「冬のデザインに取り入れたいフリーフォント10選」をご紹介！ フリーフォントは、画像下のリンク先からダウンロードできます。 では、さっそく紹介します。 1. Equable Free Retro Font 使いやすい手書きのセリフ書体。レトロなロゴをつくるのにぴったり。 ※個人・商用利用可能 2. Banaue Handwritten font ちょこっと手書き文字が欲しいときに重宝する手書きブラシフォント。 文字間隔をあけてグリーティングカードに使うのがおすすめです。 ※個人・商用利用可能 3.
初心者デザイナー必見！知っていると便利なMacフォント管理アプリ5選
デザインをする上で欠かせない要素のひとつに、フォントがあります。 さまざまなパターンのデザインをしていると、パソコン内にインストールされているフォントの種類などを確認するのに手間と時間がかかってしまう場合があります。 そのような際は、フォント管理アプリの使用を検討してみてはいかがでしょうか。 今回は、特に初心者のデザイナーの方にオススメしたい、Macパソコンで利用できるフォント管理アプリ 5選をご紹介します。 それぞれ使用できる機能や値段などが異なりますので、本記事を参考にデザイン環境等に合わせて最適なものを選択してください。 初心者デザイナーにオススメのフォント管理Macアプリ5選 1.Font Book https://itunes.apple.com/jp/app/fontbook-original-typeface/id448250130?mt=8 使用料金：360円 Macのパソ
アクセシビリティとSEO共通の最適化――「文字サイズと色コントラスト」「リンクとアンカーテキスト」 | Moz - SEOとインバウンドマーケティングの実践情報
この記事は、前後編の2回に分けてお届けしている。「隠しテキスト」「キーワードの詰め込み」について紹介した前回に引き続き、今回は「テキストのサイズと色のコントラスト」「リンクとアンカーテキスト」について見ていこう。 →まず前編を読んでおく テキストのサイズと色のコントラストページを美しく見せたいという目的のためだけに、フォントのサイズが小さく低コントラストのテキストが使われることが、よくある。 SEO担当者も、他のコンテンツに影響を与えずにキーワードを追加しようと、低コントラストでフォントサイズを小さくしたテキストを使うことがある。 ちなみに、ここで詳しく取り上げる話ではないが、検索エンジンはフォントのサイズと色を考慮できる。検索エンジンはこちらの考えていることなどお見通しなのだ。 だが、サイズやコントラストはSEOに留まらない問題を引き起こす可能性がある。色覚異常や色覚に問題がある人は、一
聞き慣れないけど確実に知っておきたいCSSやhtmlの新機能
作成：2016/10/3 Web制作 > 効率よくレイアウトを作成できるように、あまり聞き慣れないけど、今後増えていくであろうプロパティや単位、仕様策定中の新しいプロパティなどについて非常に参考になる記事をチョイスさせていただきました。 エンジニア速報は Twitter の@commteで配信しています。 srcset属性 HTML5で策定されたsrcset属性をimageタグに使うと複数の画像をカンマ区切りで指定することができます。「ウィンドウサイズに応じて画像を切り替える」とのこと。必要な画像だけ読み込まれるのでパフォーマンスが向上しそうです。 <img src="foo.jpg" srcset="2.jpg 2x, 3.jpg 3x" alt=""> srcは未対応ブラウザのフォールバック、「x」はデバイスピクセル比（画素密度記述子）、「w」は横幅（幅記述子。○○px以下なら○○w）
フォントにそれで大丈夫? イチから学ぶWebフォント講座(1) 文字とは、書体とは、フォントとは
9月16日に発売されたiPhone 7。日本人が待ちに待った、いわゆる「おサイフケータイ」にも対応しました。コンビニはもちろん、タクシーや新幹線の支払いをiPhone一つで済ませられるならば、無駄な荷物を持たずに外出することも増えるのかもしれません。 こうしたモバイル端末の進化には目を見張るばかりですが、一方で日々ブラウザで閲覧するWebサイトが”モバイル化”に追いついていない印象を受けます。飲食店などのWebサイトでは、お店の雰囲気を伝えるために、デザイン性の観点から「こだわりのフォント」を使用して、テキストを画像化しているケースが散見されます。 ただこの場合、ユーザーが友人などに「お店の場所はここ」「こういうメニューがあるよ」といった気持ちでテキストをコピーしようとしても選択できず、SEOの観点でも、テキスト化されていないことで、マイナスになる可能性があります。つまり、「好印象を与えた
最近話題になったイケてるWebサービス・アプリ15選（2016年8月編）
9月になりましたので、2016年8月に話題になったWebサービス＆アプリを紹介します。 8月は、お盆があったのにも関わらず、たくさんのサービスがリリースされました。 その中でも特に気になっているものを15個ピックアップしてみました。 SKIYAKI TICKET SKIYAKI TICKETは、QRコードを使用した電子チケットを販売＆発券できるサービスです。 チケットはすべてQRコードにより発券され、購入＆発券にはSMS認証による端末認証なども必須で、更には発券されたQRコードは30秒毎に更新されるなど、転売や譲渡ができない（一緒に行く友人への分配は可能！）仕組みになっています。 また、物理的なチケットがないため、会場への入場時もアプリをインストールしてQRコードをかざすだけというスムーズさ。 まさに、昨今のチケット転売問題に終止符を打つようなサービスです。 今後は、安全に違法ではないかた
プロが実践するモダン CSS の書き方入門テクニック20選まとめ
海外サイトTutorialzineで公開された「20 Protips For Writing Modern CSS」の著者 Danny Markov より許可をもらい、翻訳転載しています。 この記事では、CSSスタイリングで実践したい、便利な20種類のテクニックをご紹介しています。CSSをはじめたばかりの初心者のひとにも合った内容も多く、あまり知られていない少しだけ高度で、より実践的なCSSテクニックまで学ぶことできます。これらのテクニックを利用することで、今後のウェブ制作をよりスムーズに、快適に行うことができるでしょう。 コンテンツ目次 1. 縦方向のマージン幅に気をつけよう。 2. レイアウトに Flexbox を利用しよう。 3. CSS リセットをしよう。 4. Border-box をすべてに適用しよう。 5. イメージファイルは背景に適用しよう。 6. リストテーブル用ボーダー
新作続々！デザイナーが確認しておきたい、すごいフリーフォント37個まとめ 2016年8月度
毎月公開されたデザイン性の高いフリーフォントのみをピックアップし、まとめてご紹介しています。今回は、2016年8月度のフリーフォントまとめです。 シンプルで使いやすいフォントから、モダンでオシャレな手書きやミニマル書体、2016年に爆発的人気のブラシフォントなど幅広いセレクションを揃えています。商用利用の有無について一緒に記載しています、変更されている可能性もあるので、参照ページを確認するようにしましょう。 詳細は以下から。 新作続々！デザイナーが確認しておきたい、すごいフリーフォントまとめ Aldi Slim Font 第１弾からややスリムになって帰ってきた書体は、Regular と Bold の2ウエイトが収録されています。 ※ 個人、商用利用可能 Gothvetica もともと似ている Gotham と Helvetica フォントを組み合わせた、その名も「ゴスベチカ」。 ※ 個人利
無料で使える！毛筆の日本語フリーフォント12選
和風な雰囲気を出したい時から、手書き感満載のやわらかい印象を与えたい時まで、意外と使いドコロの多い「毛筆フォント。」 今回は、数ある毛筆フォントの中から、個人・商用利用OKの日本語フリーフォントを厳選してみました！ 力強いものから、独特のかすれが表現されているものまで、できるだけ様々な字体のフォントを選びました。 毛筆の日本語フリーフォント！個人・商用利用OK 藍原筆文字楷書 一字一字を手書きで描いたというフォントです。 ひらがなやカタカナの他、一部の記号や教育漢字も含まれています。 商用利用もOKですが、事前に参考URLなどを提示したうえで使用報告をする必要があります。 【ダウンロード】 Faraway『藍原筆文字楷書』フリーで使えるフォント配布中 衡山毛筆フォント 書家の青柳衡山先生が揮毫及び作成されたフォントです。 丁寧な手書きで書かれた綺麗な文字が印象的です。漢字を含めて、1300
知っておこう！CSSの各バージョンでできることの違い
ホームページは、基本的にHTMLとCSSを組み合わせて作成されます。 HTMLはホームページの構造を、CSSはホームページのデザインを構築する役割を持っています。 CSSにはいくつかのバージョンがあります。バージョンによって異なる特徴を持っていますが、その違いはご存知でしょうか。 今回は誰でも分かる、CSSの各バージョンの違いを解説します。 これからCSSを勉強しよう思っている方はCSSがどのような変化を遂げてきたのかを事前に知っておくと知識を深めやすいでしょう。 CSS(Cascading Style Sheets)とは CSSとは、ホームページの見た目や構造などのスタイルを構築するための言語です。 HTMLやXHTMLでWebサイト内の各要素の意味や情報の構造を定義し、CSSで色や文字サイズなどでそれらを装飾することで、普段目にするホームページがパソコン上で表示されます。 CSSのバー
かっこいい日本語フリーフォント16選（デザイン向き） - 無料で使える日本語フォント投稿サイト｜フォントフリー
日本語のフリーフォントを利用してデザインする際などに「クールなデザインにしたい」「かっこいいフォントを使いたい！」という場面があるかと思います。 ただ、英語のかっこいいフォントはすぐに見つかるのに、日本語になるとすぐに見つけられないということがあります。 そこで今回は、デザイン性が高くてかっこいい日本語フリーフォントをフォントのタイプに分けてご紹介していきます。 商用利用可能なものから、漢字を含んだもの、カタカナのみのかっこいいフォントまで幅広く用意してみましたのでご覧ください。 かっこいいゴシックフォント 鉄瓶ゴシック 鉄瓶（てつびん）ゴシックは、フォントな自由さんが公開している角ゴシックフォントです。 「源ノ角ゴシック」を改変して制作されており、極太の文字かつごつごつとした質感がかっこいいフォントです。 商用：OK ひらがな：◯ カタカナ：◯ 漢字：◯ ▷ 鉄瓶ゴシック スマートフォン
文字フォントの使い方で変わる！階層づくりに必要な基本テクニックまとめ
文字テキストの視覚的な階層（英: Visual Hierarchy）とは、いったい何を意味しているのでしょう。 デザインプロジェクトに致命的な影響が出てしまうこともあるので、じっくり検討する必要があります。そうすることで、もっとも注目して欲しい情報がどれなのか、ユーザーに分かりやすく説明できるようになるでしょう。 Image Source: Unsplash 4.5 by Kirill Zakharov 階層を利用しない場合、文字や単語、文章などはどれも同じように見えてしまい、ユーザーが読みたいコンテンツを探すときにも役に立ちません。 以下では、文字テキストの階層を利用してユーザーにメッセージをうまく伝え、魅力的なウェブサイトづくりを目指す、基本テクニックやルールをまとめて見ていきましょう。 詳細は以下から。 文字における階層で気をつけたいポイント Image Source: Helly
AKB=adidas!? 超有名ブランドが採用しているフォント10選
美しいフォントが世にあふれています。商標・ロゴなどにそれぞれ有名な企業が使用していることでそのフォントの格をさらに上げている感もあります。相補的に企業とフォントお互いのイメージを固めているわけです。 ここでは中でも特に有名な企業に使用されているようなフォントをご紹介いたします。（アルファベット順） １．Copper plate gothic/カッパープレートゴシック フレデリック・W・ゴーディが作成したフォントです。豪華でクラシックな印象を与え、レストランなどの店名看板・ロゴなどにもよく使われているようです。 使用している有名企業としては「Dean&Deluca」「Moleskin」「田中貴金属」などが挙げられます。いずれも高級路線ですね。 ２．Didot/ディド
「一歩踏み出してみる」と「やりきること」で掴んだデザイナーへの道 | 株式会社LIG(リグ)｜DX支援・システム開発・Web制作
こんにちは、デザイナーのみやです。 ポケモンGOはUIが美しいですね。個人的に刺さったのは鳴き声を当時のままにしてくれたことです。 前回より�『デザイナーへの道』と題して、LIGのデザイナー陣がデザイナーを目指したきっかけや、LIGにジョインするまでのキャリアなどをご紹介しています。 ▼前回の記事 さて、第2回目にあたる今回は、Webデザインの専門学校を通じて、Webデザイナーになるというケースをお話しします。「Webデザインに興味あるけど今の仕事があるし……」「美大に行かないと無理なんでしょ？」と思っている方必見です。 Webデザイナーを目指したきっかけ 大学の委員会で広報用のWebサイトを作り、Web制作の楽しさにハマる 僕がWebと出会ったのはかなり遅い方だと思います。それまでPCの扱いは比較的詳しい方でしたが、HTMLやCSSについては存在すら知りませんでした。大学で所属していた委
1
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
長文日記