ウェブサイトのフォントは何を指定すればよいのでしょうか？ CSSのfont-familyプロパティーに指定可能なフォントは選択肢が多く、HTMLコーダーなら誰もが一度は迷ったことがあるはずです。 font-familyの組み合わせを紹介している記事は多々あります。しかし、必要のない指定や、考察不足なまま紹介している記事を見かけることは少なくありません。それもそのはず、フォント事情は日々変化するもので、古い情報は役立たないことが多いためです。 本記事ではフォントに関わるここ最近のビッグニュースを取り上げつつ、教訓から学んだ変化に強い「無難」なフォント指定を紹介します。 結論 いきなり結論ですが、以下のフォントの組み合わせがオススメです。CSSのbodyセレクターなどにコピー＆ペーストして利用ください。 body { font-family: "Helvetica Neue", Arial,
Cocoda!で『Human Interface Guideline』を実践しながら学べるコンテンツがリリースされました！🚀 Cocoda!デザイナーのグレイテストヒロキです🕺 この度、UIデザインを学習している人・もっとUIデザインのスキルを付けたいデザイナーに向けた、デザインガイドライン(Human Interface Guideline)を元にしたアプリデザインができるようになるコンテンツが追加されました！🎉 同時に、アプリデザインだけでなく「WEBデザインが作れるようになる」コンテンツも追加されているので、そちらと併せてチェックしてみてください！✨ ↓↓早速取組んで見たい方はこちらから👍👍↓↓ https://cocoda-design.com/contents ✍️Human Interface Guideline(=HIG)とは HIGとはApple社が提供するiOS
ソシオメディアがまとめている、ヒューマンインターフェースをデザインする際の指針です。これらは、インターフェースデザインに関する様々な文献と、実際のデザインコンサルティングで得た知見をもとに、ソシオメディアが独自に編纂したものです。継続的に追加・更新していきます。 すべてモデルインタラクションプレゼンテーション
Webサイトの制作はどんどん複雑化しており、１人で行う仕事ではなくなってきています。サイト制作では、ビジネスの目的に合わせた一貫性のあるデザインによって、快適なユーザー体験を作り出すことが重要です。 Webサイトを分割してチームでデザインをするときにチームメンバーが共通認識を持つには、デザインドキュメントまたはWebデザインのスタイルガイドを作成することが有効です。これは、エンジニアがデザインを変更してしまうことを防ぐのにも役立ちます。 異なるページの間に一貫した体験を作り出すために、スタイルガイドを用意するのはとても有効です。また、今後の開発やサードパーティ製品が生まれた際も、ブランドのガイドラインに沿い、ブランドの一部として知覚されるようにやすくなるでしょう。 Luke Clum氏は、Webデザインの第一歩としてスタイルガイドを利用することについて、昨年簡単に紹介をしました。この記事で
1. 目的 WordCamp Kyoto は、私たちのコミュニティが誰にでも真にオープンであるべきだと考えています。このため、私たちは性別・性的指向・身体障害・民族・宗教・好みの OS やプログラミング言語、テキストエディターにかかわらず、誰に対してもフレンドリーで安全で快適な環境を提供できるよう尽力します。 この行動規範では、参加者の行動に求めることと、受け入れがたい行為が招く結果について要点をまとめています。 すべてのスポンサー、ボランティア、一般来場者、その他の参加者の皆さんが、誰にとっても安全で快い体験ができるカンファレンスを実現するために協力してくれることを歓迎します。 2. オープンソース市民 この行動規範のもうひとつのゴールは、参加者が私たちのしていることとコミュニティ全体の関係を認識し、強化することによって「オープンソース市民」を増やすということです。 このゴールを達成する
日本の法規制がわかりにくい。 理由は、これにつきます。 訪日外国人の方が、日本国内でドローンを飛ばす際、法令・規制に反する形となって注意を受けるケースがあります。現状は、そうなっても仕方が無い状況です。 「そんなもん、日本に来る前に検索して、ルールを調べておけばいいじゃん」 と思っていたのですが、実際に検索してみると、さっぱりわからない。 日本の法規制はわかりにくい、と書きましたが、航空法をはじめとする法令・条例がわかりにくい、ということではありません。実際にどのようなレギュレーションとなっていて、どう運用すればいいか、が非常にわかりにくい形になっています。 日本のルールのわかりにくさ1. 検索に引っかからないあなたが外国人だとして「今度、旅行で日本へ行くついでに、ドローンを飛ばして景色を撮影してみようかな～」と思ったとします。 その際、まず最初に、どういう法規制になっていて、ルールに違反
はじめに http://qiita.com/raccy/items/bf590d3c10c3f1a2846b を見ていたら、はてブに「理由がないから」ということがよく挙がっていたので、理由をつけてあげたら有益な内容になるかな？と思い、拙いながらも補足を試みようと思います。 【2017 1/3 15:10 追記】 元記事の前提はgulpなどを使ってminifyなども行なえる（もしくは行う目標がある）前提の様子なので、中級者以上がターゲットかなーと思いました。そのつもりで読むととてもいい記事だと思っています。 「最新のJSの書き方を覚えてあとは変換機能に任せればレガシーなJSのキツイところに向き合わなくて済みますよ？」みたいなイメージだとわかりやすいかな？ ==、!= 理由 暗黙の型変換が発生して、別の型の比較が真で扱われてしまう場合があるため。 解説 サンプルコードにも出ていますが言葉足らず
JavaScriptは大変難しい言語です。Rubyの難易度を2、Cの難易度を5、C++の難易度を8にすると、JavaScriptの難易度は12ぐらいあると思います。このコーディングガイドはそんなJavaScriptの深みに嵌まらないようにするためのJavaScriptの書き方を規定したものです。初級者1のための物ですので、わかってやっている人に好きにやってください。 このコーディングガイドは絶対に従わなければならないものではありません。私は一切強制はしませんし、初級者が従わなければならないという義務もありません。採用するしないはみなさんの自由です。 禁止編 JavaScriptには安易に使用してはいけない機能があります。下記の機能は、**それぞれの機能を使っても良い、または、使うべきであるという理由を説明できない限り、**使用してはいけません。 ==、!= ==と!=を使用してはいけません
scuba_diving 7 月 23～25 日にバンコクで開催される、初の 3 日間の SEO カンファレンスにぜひご参加ください！Search Central Live Deep Dive 2025 へのご登録と、ライトニング トークでのアイデアの発表をお待ちしております。 Google 検索の基本事項 Google 検索の基本事項は、ウェブベースのコンテンツ（ウェブページ、画像、動画など、Google がウェブ上で見つけた一般公開されているコンテンツ）について、Google 検索結果に表示されるための適格性を満たし、上位に表示されるようにするための重要な要素です。 技術要件: Google 検索でウェブページを表示させるためにウェブページに必要なもの。 スパムに関するポリシー: 掲載順位が下がったり、Google 検索の検索結果から完全に除外されたりする原因となる行動や手法。 主なベ
ここではウェブアクセシビリティ維持・向上の取組の必要性を強く実感していただくため、障害者の方のウェブページ利用方法を紹介した映像等をご覧いただけます。 総務省では、平成17年度に視覚障害者（全盲・弱視）、肢体不自由者の方のウェブページ利用状況を紹介するビデオを制作・公表しました。 その後、ビデオの陳腐化や「障害を理由とする差別の解消の推進に関する法律（平成25年法律第65号）」の施行等により、公的機関のウェブアクセシビリティ確保が重要になっていることを鑑み、平成28年7月1日に「視覚障害者（全盲・弱視）のウェブページ利用方法紹介ビデオ」を更新いたしました。
UX Movementにおいて記者、編集長を務めます。明快で効果的なデザインに美点を見出し、利用者のために払う労力を惜しみません。 一言で灰色と言っても、明るいものもあれば暗いものもあり、実に様々なバリエーションがあります。Webサイトなどでは、いたるところでお目にかかることのできる色でもあります。濃い灰色は主に見出しや本文に、薄い灰色はメタデータ、分類名、説明文に多く使われます。これらの色合いのうち、最も乱用されるのは薄い灰色です。 薄い灰色の文字の問題点 文字色として薄すぎる灰色は可読性に問題を起こしかねません。灰色の文字を薄くしすぎてしまえば、読者が読むにあたって支障をきたすことになります。文字の明度によっては、薄い色の背景に混ざってしまうのです。この現象は、単語や文字をぼやけさせ、判読を困難にします。無理に判読を試みれば、目を傷めてしまうでしょう。 また、薄い灰色の文字は読者の誘導
言葉で決まるアプリの印象 2 年前に発表されて以来、細かな更新が続いている Material Design。最近、UI の動きに関するガイドが大幅に改変されたことで、感覚的なところも共有しやすくなってきました。Android アプリにおける UI デザインの基礎を固める上で、Material Design は非常に参考になりますが、このガイドラインは見た目のことばかり書かれているわけではありません。 Material Design の中には「Writing」と呼ばれる言葉遣いに関する項目があります。ボタンのような操作 UI のラベルはもちろん、エラーメッセージや、挨拶文など、アプリに表示されるテキストすべてに関してガイドラインが制定されています。言葉は大事なインターフェイスですから、きちんと項目をつくって紹介してあるのは素晴らしいことです。 以下、「Writing」項目で紹介されているガイ
Update 2015/5/8: 指摘頂いたタイポや誤訳などを更新しました。 2015/5/8: 構成を一部修正しました。 Intro 4/30 mozaiila のセキュリティブログに下記のようなエントリが投稿されました。 Deprecating Non-Secure HTTP | Mozilla Security Blog エントリはそこまで長くないので、ここに翻訳の全文を記載します。 そして、元エントリのライセンスである CC BY-SA 3.0 に則り、 本エントリも同じく CC BY-SA 3.0 とします。 Deprecating Non-Secure HTTP 原文: Deprecating Non-Secure HTTP 今日は、 non-secure な HTTP から、徐々に廃止していくという方針についてアナウンスします。 HTTPS が Web を前進させる手段である
概要： Sketchを使ったAtomic Designの方法がプロダクトデザインの未来形です。 初めに この記事は、上のビデオの素晴らしい人物、Brad Frostの開発したシステムについて書いています。Atomic Designは今のレスポンシブなデジタルの世界に対応するために開発されたものです。 ここ何年も、私たちのデザインを少しでも理解してもらえるよう、スタイルガイド、基本的ガイドラインやムードボードなどのツールを作成してきました。同じように、開発者もBootstrapやFoundation、Bourbonなどのツールでプログラミング作業を楽にしようとしてきました。互いに妥協点を見いだし協力することで互いの作業を楽にできます。Atomic Designはまさにそれを実現しようとしています。 Atomic designはあるインスタンスやページをデザインすることではありません。大局的に
みなさんは普段JavaScriptを使って開発する場合、インデントはどのようにしていますか？ タブ、スペース2個、スペース4個・・・などいくつかの選択肢があります。 個人で開発している方は問題ありませんが、チームで開発している場合は意見が分かれ議論になることもあるでしょう。プロジェクト開始早々インデント論争でチーム内の雰囲気を悪くしたくはありません。 本記事はそんなインデント論争の1つの解決策となるべく、ブラウザベンダーやプロダクトで定めているJavaScriptコーディングのインデントルールを調べてみました。 この記事のポイント* 海外のJS界隈ではスペース2個のインデントが多数派 ESLINTなどの設定ファイルからコーディングルールを調べられる なぜインデント論争が起こるのか？ そもそもなぜインデント論争が起こってしまうのでしょうか？ それはそれぞれ一長一短のため好みが分かれてしまうか
目次 問題の根っ子 Web制作の場合 ー インブラウザデザイン(Designing in the Browser) Webアプリ開発の場合 ネイティブアプリの場合 イニシアチブの所在 プログラマーへの指示の出しかた 判断材料を提供する 検索性の高い資料 カラースキーム レスポンシブ対応 インタラクション プラットフォームごとに異なる自然な表現 まとめ アプリ開発においてのフローは、まずデザイナーがデザイン指示書を作成し、プログラマーが、なるべく忠実にそれを再現するように実装していくという順序になることがよくあります。自然で現実的な発想ではあるのですが、実際の開発の過程では、この流れが思っていたほどスムーズにいかないこともあります。そこで、これまでの経験を踏まえて、今後案件をはじめる前にデザイナー、あるいは、プロジェクトマネージャーやディレクターに読んでもらうための資料を作成することにしまし
無料で資料をダウンロード SEOサービスのご案内 専門のコンサルタントが貴社サイトのご要望・課題整理から施策の立案を行い、検索エンジンからの流入数向上を支援いたします。 無料ダウンロードする ＞＞ 度々流出が話題になる検索結果の品質評価のガイドラインですが、今回、Googleが完全版を公開したようです。The SEM Postがこれについての記事をあげていましたが、Google自ら完全版を公開しています。The SEM Postによると、今回のガイドラインはモバイルについての記載が多く含まれているとのことです。下記記事内にもある通り、Googleはガイドラインの内容を都度更新しているようですが、Googleのモバイルに対しての注力具合がここからも見えてきます。– SEO Japan Googleが検索結果の品質を評価するガイドラインの完全版を公開した。Googleがこのガイドラインを公開す
スピン経済の歩き方： 日本ではあまり馴染みがないが、海外では政治家や企業が自分に有利な情報操作を行うことを「スピンコントロール」と呼ぶ。企業戦略には実はこの「スピン」という視点が欠かすことができない。 「情報操作」というと日本ではネガティブなイメージが強いが、ビジネスにおいて自社の商品やサービスの優位性を顧客や社会に伝えるのは当然だ。裏を返せばヒットしている商品や成功している企業は「スピン」がうまく機能をしている、と言えるのかもしれない。 そこで、本連載では私たちが普段何気なく接している経済情報、企業のプロモーション、PRにいったいどのような狙いがあり、緻密な戦略があるのかという「スピン」を紐解いていきたい。 読んでいただければ分かると思うが、「従業員による私的なTwitterアカウントより、特定の意見を支持するツイート」があったけれど、これは会社の公式な意思・見解とは異なるという「釈明」
これまでに数多くの一部上場企業様のWebサイトのリニューアル・サイト制作にコアメンバーとして参加し、その中で表記ルールもかなりの数を策定してきました。策定時のベースに使用する「ひらく漢字」「ひらかない漢字」の一部を紹介します。 ※以前、公開した記事を再編集したものです。 表記ルール: ひらくことが多い漢字 表記ルール: ひらくことを検討する漢字 表記ルールの策定にあたり 表記ルール: ひらくことが多い漢字 ひら（がなで書）くことが多い漢字。 ※「正・誤」は使用する際の基準であり、日本語としての「正・誤」ではありません。 読み 正 誤
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
