いつもサイト運営者を悩ませる Font-Family の指定。 今回は最先端な Font-Family 指定を考えてみました。 2017年になりましたが特にフォント環境の動きがなかったので、少なくとも当年中はこの記事を更新の更新を続けていきます。 当サイトで指定しているFont Family 当サイトでは現在、こんな感じで指定しています。 font-family: -apple-system, BlinkMacSystemFont, 'Hiragino Sans', 'Hiragino Kaku Gothic ProN', '游ゴシック Medium', meiryo, sans-serif; クリップボードにコピー スポンサーリンク Mac では安定のヒラギノ Mac では普段目にするフォント、ヒラギノ角ゴを指定します。 なんだかんだでずっと Mac のシステムフォントとして使われてます

HTMLのテキストはPhotoshopのように融通が効かないから、デザイナーからの細かいお願いはだいたい断っている...なんてことありませんか？ モダンブラウザは色んなプロパティが対応してきているので、できることも増えています。 今回は、知っているといざというとき便利なテキスト周りのCSSを集めてみました。 「日本語、文字詰めできないかな？ほら、このカタカナとかキモい。。」 「Webで文字詰めだと？無理なんだよあきらめな！」なんていう時代はもうとうに過ぎ去っています。OpenTypeのフォントであれば、日本語でもちゃんと文字詰めできるんです。 .class { -moz-font-feature-settings: "palt"; -webkit-font-feature-settings: "palt"; font-feature-settings: "palt"; } ↓こんなかんじで

こんにちは、メルカリのQA-SETチームで自動化をぶりぶりしている tadashi0713 です。 これまではモバイルアプリ・WebアプリのE2Eテストを中心に自動化をしていましたが、最近ではプロダクト部門・カスタマーサポート部門・コーポレート部門の業務自動化にも挑戦しています。 今回はSelenium WebDriver (以下 Selenium) を使って簡単にできるブラウザ作業自動化についてご紹介します。 10/25にGitHub JapanでLT発表した資料もありますので、合わせてご覧ください。 english-lt.connpass.com 意外と多い、ブラウザを使った繰り返し作業 社内の色々な職種・チームの方々とコミュニケーションをしていると、ブラウザを使った繰り返し作業が多く感じました。 例えば 社内で使用しているWebサービスのアカウントを社員に付与する Chartio(h

Stripe の豊富な決済機能、デザインを使用し、自社のビジネスに最も適した安全な決済フォームを設計しましょう。

ゴシック体 明朝体 丸ゴシック すべて カッコのみ Hiragino Noto 横書き 縦書き w100 w200 w300 w400 w500 w600 w700 w800 w900 0.625rem 0.75rem 0.875rem 1rem 1.125rem 1.25rem 1.5rem 2rem Before 「約物半角専用のWebフォント」を優先的に当てることによって、Webテキストの日本語に含まれる約物を半角にすることができました。例えば「かっこ」や『二重かっこ』、【バッジに使いそうなかっこ】などを半角にできます。ウェイトは9種類。Noto Sans JPに沿っています。 <!-- HTML：CDNリンクを貼り付け --> <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/yakuhanjp@4.1.1/dist

インターネット広告費は年々高騰傾向にあり、いかに多くのユーザーを集客するか、日々頭を悩ませる方も多いのではないでしょうか。 一方で、集客したユーザーにコンバージョン（CV、購買やお問い合わせ、資料ダウンロードなど）してもらうための施策、つまりサイトの分析と改善にお金と労力をかけられている会社はどのくらいいるでしょうか。 今回は国内13,000サイト以上の導入実績があるサイト分析＆改善ツール「Juicer」をご紹介しつつ、Webサイトの分析、改善を行うために知っておくべきポイントを紹介します。 サイト分析＆改善活動の重要性とは Webサイトで成果をあげるためには、集客を増やすこと、集客したユーザーのCV率を向上させること、主にこの2つに注力する必要があります。 しかし、広告には多くの予算が投じられる一方、その受け皿となるサイトには特に施策が行なわれていない、というケースが多く見られます。集客

Webサイトを構築する上で、必ず行うべきことの一つがサイト競合分析です。 なぜか？ネット上では「比較」という行為がほぼ確実に行われるからです。 ネットリテラシー向上、タブブラウザの普及、比較サイトの拡大などによりユーザにとって比較という行為は、ネットを使う上で一般的なものとなりました。 そんな中で、競合分析をせずにWebサイトを構築したらどうなるでしょうか？ 自分たちではベストだと思って作ったものが、実は他社サイトよりも劣っていたとしたら？ 今回はそんな状況にならないために、弊社が実際にサイト構築を行う際に、事前におこなっているサイト競合分析手法をご紹介します。 それではいってみましょう。 ※今回ご紹介する競合分析手法は、あくまでWeb上での競合分析手法です。 新興市場でまだWeb上の競合が少ない、またはリアルの現場であたる競合などに対抗する場合はまた別の手法が必要なので、その点予めご了承

Google Fonts は、デザイナー ウェブフォントを直感的にご利用いただける、安定したオープンソース ディレクトリです。 膨大な数の文字のデザインに要する時間や、大容量のフォント ファイルをウェブフォントとして提供する際に必要な技術的インフラストラクチャなど、日本語の書体デザインやフォント開発にはさまざまな課題が立ちふさがります。そこで、規格や技術の開発を進めると同時に、Google Fonts を通じてデザイナーやデベロッパーの皆様に日本語のウェブフォントをお試しいただけるようにしました。 Google Fonts provides an intuitive and robust directory of open source designer web fonts. Japanese typeface design and font development presents ma

こんにちは、まろCです。2016年を振り返るといろんなwebサイトがありました。 印象的なのは、映像を絡めて心に突き刺さる演出をしている点です。 作り手がwebに動きを求めた結果、より良いユーザー体験が生まれ、話題となるコンテンツが続々と生まれました。しかし、受け手にとっては、それがwebglでも動画でもどちらでも良いこと�。よりよい体験のためにどんな手法を選択するかは、作り手の舵によるところがあります。そして、その手法は発信者から受け手に対して一方的であったり、受け手のアクションを検知して次の動作を分岐させたりと、手法も様々です。 今回は、個人的に、そこをうまく突いたな〜と思う動画や、キャンペーンサイトを紹介したいと思います。 世界初の通話連動型MV http://ura-shinozaki.com/ URA SHINOZAKI-ほんとうの愛を、知っていますか？ ブラウザ上で流れる動画を

2017年1月18日に行われた「たまキャリ #1」のセッションで使用したスライドです。Read less

GoogleAnalyticsでは、ページを最適化するためのABテストの機能が備わっています。 ※GoogleAnalyticsでは「ウェブテスト」と呼びます。 ウェブテストでは、複数の異なるパターンを検証する事によって ユーザーに、より効果的なキャッチコピーやボタン、サイト内の導線を検証する事ができます。 今回はその「ウェブテスト」をご紹介していきたいと思います。 1.検証用のページを作成する オリジナルページから検証したい場所を1箇所変更したテストページを作成します。 ※テストする際は、複数箇所を変更してしまうと効果が見えにくくなってしまう為、 変更箇所は1箇所にする事をおすすめします。 （ウェブテストでのパターンは9つまで設定できます。） 今回は、下記のようにボタンの色を変えたものを作成しました。 2.検証用のページを正規化する テストページがクローラーにインデックスされないように、

この記事は本日マイナビ出版から発売の『UX × Biz Book ~顧客志向のビジネス・アプローチとしてのUXデザイン~』の「Chapter2 UXと顧客エンゲージメント 」から、無印良品のUXにおける取り組みのインタビュー部分を抜粋したものです。 本著のこの章では無印良品がどうUXデザインをビジネスに活用しているかクローズアップしており、Webやソーシャルでのブランド・コミュニケーションの責任者である良品計画のWeb事業部の川名さんと実際にWebにおけるUXを担当されている武田さんにお話を聞いています。 登場人物 株式会社良品計画 Web事業部　川名常海（かわなつねみ）氏 株式会社良品計画 Web事業部　武田歩（たけだあゆむ）氏 株式会社メンバーズ 執行役員、株式会社エンゲージメント・ファースト CEO　原 裕（はらゆたか）氏 無印良品の提供する顧客体験価値とは 原 裕氏（以下、原）　い

あなたが広大な敷地で迷ったとしたら、真っ先に知りたいことは自分が今どこにいるかでしょう。一度自分の現在地を知ることができれば、目的地からどのくらい離れているのか見つける事ができます。ショッピングモールなどで「You are here（現在地）」と地図に表記するのも同様の理由からです。 ユーザーはサイト内で迷子になったとき、自分たちがどこにいるのか知りたいのです。ユーザーが自分の現在地を知るということは、ユーザーがどこに行くべきなのかを示すことと同義です。その方法として、パンくずリストを使って道順を示す地図をユーザーに提供するべきです。これはサイトの構造の中での「You are here（現在地）」表示のようなものになります。 パンくずリストを使うべき状況とは 全てのサイトはコンテンツを階層化しています。コンテンツの量によって、浅いものもあれば深いものもあります。もしあなたのサイトの階層が３

なんかすごい思い付きで www.adventar.org に参加してみたんですけども。 気づいたらいつの間にか自分の日になっていて面倒くさくなってきて激しく後悔したびっくりしたという。 ぼくはWebディレクターでありデザイナーさんではないし、すてきデザインができるようなビジュアルセンスのようなものは、誠に残念ながら母上から授けられずにこの世に生を受けているものですから、"いわゆる"デザインはやらないんですが、その前の画面設計についてはワイヤーフレームなるものでいっつもやっておりますので、その観点からなんか書きましょうとそういうことですお母様（謎） そんなわけで、うぇぶぎょうかいのむめいでぃれくたーのお時間です。 Webディレクターとしてはえーと、もうすぐ丸１２年になります。そうするとまあ、たぶん数千ページは「ワイヤーフレーム」をつくってきたんじゃないかと思います。正確な数字はわかんないです

こんにちは。ヨッピーです。普段は「銭湯の神」として主にインターネットでは銭湯の普及活動にいそしんでおります。銭湯は、いいぞ。 DeNAパレット構想さて、ご存知の方も多いかもしれませんが、横浜DeNAベイスターズのオーナー企業であり一部上場企業であるところのDeNAが運営する「DeNAパレット構想」傘下のキュレーションメディア群が盛大に炎上、稼ぎ頭のMERY、炎上の発端となったWELQを含む１０媒体全てが運営を停止、記事が非公開になるという局面を迎えており、DeNAの株価にも影響を与えている模様です。 DeNAが「MERY」全記事の非公開化を発表「厳正かつ公正な調査」のため https://www.buzzfeed.com/keigoisashi/dena-mery 更に本件がリクルートやYahoo!、サイバーエージェントなど大手各社に飛び火したことで新聞雑誌地上波問わず各所の注目を集めてお

25. ulon-colon ConsumerPublisher WebSocket Connection (start-producer) (produce msg) (make-consumer “ws://xxx”) (consume consumer #(println %)) 異なるプロセス間でメッセージ転送する仕組み http://github.com/kawasima/ulon-colon/

モバイルWebのUIを速くする基本テクニックがわかる──Google I/O 2016 High Performance Web UI 川田寛（ピクシブ株式会社） こんにちは、ふろしきです！ 私はHTML5 Experts.jpで、過去2年ほどGoogle I/Oの情報を発信し、Web技術の変化についてお伝えしてきました。振り返るとGoogleは、2014年にモバイルWebの提唱と技術要素の拡大を図り、2015年からは「RAIL（モバイルWebが目指すべきパフォーマンス指標）」や「Progressive Web Apps（アプリのように振る舞うWeb）」といった、モバイルとの親和性が高いWebを作り出すための”考え方”を推し進めました。今年2016年は、さらにそれを踏み込んでいったという感じがします。 今回のI/Oで取り上げるのもそのひとつ。毎度お馴染みGoogle Developer A

こんにちは、太田です。前々回、前回とJavaScriptの基礎的な部分を解説しました。今回はJavaScriptからみたHTMLを中心に、DOMについても少しずつ解説しています。 JavaScriptとHTML FirefoxのアドオンやサーバーサイドJavaScriptなどの例外をのぞいて、多くのJavaScriptはHTML上で実行されるので、HTMLは土台となる重要な要素です。そこでHTMLの基礎的な部分からHTMLとJavaScriptの関係を解説します。 DOCTYPEとレンダリングモード HTMLといえば最初に書くのはDOCTYPEです。現在使われているDOCTYPEはHTML4.01、XHTML1.0、XHTML1.1といくつかの種類があり、さらにその中でTransitionalやStrictなどの違いや、XHTMLではXML宣言の有無（本来は必須ですが）などバリエーションが