ウェブサイトに適用する游ゴシックフォントを見直しまくった最終解 - Corredor
拙作のノーマライズ CSS ライブラリ、「Neo's Normalize」を見直していたところ、Windows の Chrome ブラウザで適用されている游ゴシックフォントがかすれていた。 「あれ？@font-face で游ゴシック Medium を指定してるのにな？」と思い、設定を見直したところ、コレが効かなくなっていた。 当時 Neo's Normalize を作る際、それなりに調査しまくった結果だったのだが、どうも仕様が変わっていたようなので、OS・ブラウザごとに挙動を見直すことにした。今回はその研究結果をまとめる。 游ゴシックフォントに関する基礎知識のおさらい Chrome で効かなくなっていた @font-face font-weight: 500 は効いたが、副作用が避けられない Chrome で游ゴシック Medium を使うのは諦める 別解 : 潔く Regular フォン
便利なWeb開発向けツールまとめ｜かずたか
※こちらの記事が「先月もっとも多く読まれたノート」の一つに入りました。ありがとうございます！ こんにちは。Kazutaka Shimizuです。 フリーランスとしてPM、エンジニアをやっています。 元々はWebマーケティングのコンサルタントをやっていましたが、独学でWeb開発を勉強してプロダクトを作って起業しました。 最近は創業した会社を離れ、フリーランスとして活動したり、プログラミングを独学した経験をこちらのツイッターで発信しています。 ✔︎この記事の内容 実務、学習のため問わず、Web制作をするに当たって便利なツールと使いかたをご紹介します3年ほど独学でWebサービスを作り運用したり、フリーランスとしてお客さまのサイトを作る中で、様々なツールを見つけました。 初心者の方ほどこうした作業効率が上がるツールを知っていた方がいいと思うのですが、周りにエンジニアがいないため情報が流れてこなかっ
脆弱性検査を行うOSSツール「OpenSCAP」で何が分かるのか
脆弱性検査を行うOSSツール「OpenSCAP」で何が分かるのか：OpenSCAPで脆弱性対策はどう変わる？（4） 本連載では、グローバルスタンダードになっている「SCAP」（セキュリティ設定共通化手順）、およびそれを基にシステム構成や脆弱性の検査を行うためのOSSツール「OpenSCAP」や、その周辺の技術、用語などを紹介する。今回は、OpenSCAPの環境を構築し、実際に試してみた。 まずはOpenSCAPを試してみよう OSSセキュリティ技術の会の面和毅です。本連載「OpenSCAPで脆弱性対策はどう変わる？」では、実質的にグローバルスタンダードの「SCAP（Security Content Automation Protocol：セキュリティ設定共通化手順）」、およびそれを基にシステム構成や脆弱（ぜいじゃく）性検査を行うためのOSS（オープンソースソフトウェア）ツール「OpenSC
TeraTermで効率良くファイル転送 - Qiita
Windowsを使用している開発者の方々は、LinuxサーバにSSH接続する場合にTeraTermをよく使われるかと思います。 そのTeraTermで、効率的にファイル転送（Windowsクライアント → Linuxサーバ、Linuxサーバ → Windowsクライアント）を行う方法を紹介したいと思います。 Windowsクライアント → Linuxサーバにファイル転送 Windowsからファイルを転送する場合はとってもシンプルで、以下のような手順になります。 転送したいファイルをTeraTermのウィンドウに向けてドラッグ＆ドロップ 「Tera Term: ファイル ドラッグ＆ドロップ」ウィンドウの「SCP:」欄に、以下のように入力 SCP: 転送先にするLinux上のパスを入力 「SCP」ボタンをクリック Linuxサーバ → Windowsクライアントにファイル転送 TeraTerm
モバイル ファースト インデックスに向けて、構造化データと画像の代替テキストをお忘れなく！
+1 ボタン 2 AMP 11 API 3 App Indexing 8 CAPTCHA 1 Chrome 2 First Click Free 1 Google アシスタント 1 Google ニュース 1 Google プレイス 2 Javascript 1 Lighthouse 4 Merchant Center 8 NoHacked 4 PageSpeed Insights 1 reCAPTCHA v3 1 Search Console 101 speed 1 イベント 25 ウェブマスターガイドライン 57 ウェブマスタークイズ 2 ウェブマスターツール 83 ウェブマスターフォーラム 10 オートコンプリート 1 お知らせ 69 クロールとインデックス 75 サイトクリニック 4 サイトマップ 15 しごと検索 1 スマートフォン 11 セーフブラウジング 5 セキュリティ 1
独りで学ぶ 論文検索｜学ぶ素人｜note
皆さんは「学術論文」を読んだことがあるでしょうか。 大学生や大学院生なら、自分の分野の論文は読んでいることでしょう。 情報が広く共有される現代でも、 「学術論文は専門家や研究者が読むもの」 「普通の市民は論文など読めない」 というイメージは今でもかなり強いように感じます。 私はこれを非常に「もったいない」と思っています。 実際には、「素人が専門の論文にアクセスする」ためのハードルは年々下がっているからです。 今や、素人でも「専門家が読んでいるのと同じ文献」をその気になれば読める時代になりました。 にもかかわらず「科学論文を読む素人」や「分野外の論文を読む学徒」が増えないのは、「論文の読み方」を大学以外でなかなか習えない、というのが一つの障壁になっているのかもしれません。 「論文の調べ方」「論文の読み方」に王道などありませんが、今回はあくまで私の例として、論文を探して読むためのハウツーを簡単
PHPのハマりポイントのリンク集 - Qiita
PHPのハマり情報のまとめです。主に罠な仕様、予想外の振る舞い、ドキュメントに詳しくは書いてない振る舞いについての情報をまとめていきます。ここに載ってない情報があればぜひとも教えて下さい。頂いた情報をもとに随時更新していきます。 PHPは引数が足りないときはエラーになるが、引数が多いぶんには何も言わない - Qiita PHPはときどき掛け算ができない - Qiita PHPのDateTime::ISO8601はISO8601ではない - Qiita SplFileObjectのREAD_AHEAD, SKIP_EMPTY, DROP_NEW_LINEはPHPのバージョンによって挙動がバラバラな件 - Qiita PHP: iterable型はiterator_to_array()に渡しちゃいけない - Qiita PHPの正規表現で^$より\A\zがいい理由 - Qiita PHP:文字
アパレルブランドにイラストをパクられたイラストレーターのその後 ... - Togetter
コミュニケーションが生まれるツイートまとめツール
デザインの役割からみる「トーン」と「マナー」
こんにちは。デザイナーの山口陽一郎です。 去る2014年2月19日（水）に、株式会社パソナテック様主催のセミナー「クリエイターのためのトーン＆マナー設計」にて登壇させていただきました。 皆さんは「トーン＆マナー」という言葉を耳にしたことがありますか？「トンマナ」と略されることの方が多いかもしれません。その説明の前に、ちょっと寄り道をさせてください。 デザインのふたつの役割とトーン＆マナーの演出 デザインには大きく分けてふたつの役割があります。 1. 機能性を高める これはユーザーにとって製品をより使いやすくしたり、誤操作の危険をなくしたり、迷わないようにサポートするための役割です。 そしてもうひとつが今回のセミナーのテーマとしてとりあげた、 2. トーン＆マナーの演出 です。製品に、それが使われる場にふさわしい属性・キャラクターを付与する役割です。 たとえばレジャーグッズなら「楽しさを想起
Googleアナリティクスでエクスポートした平均滞在時間が秒数表示になっている!!! | ブログ練習帳
「ちょっとWeb解析してみようかしらん」と意気込む見習です。 やっぱり、継続的にデータを取るのが大切。毎月の変化を見比べなきゃねと勇んでGoogleアナリティクスにログイン、データをエクスポートして、Excelで加工して…。 あれれれれ??? この前、Googleアナリティクスのエクスポートに、XLSX形式が増えて、なんか、少しベンリになったかしらんと思っていましたが、こんどは先月とちょっと見た目が違う!!!! じーくりと、見てみると、「訪問時の平均滞在時間」の表記が前と違っている!!! この前は、0:01:41というように、1分41秒とわかりやすいように表示されていたのに…。こんどは、100.69となっている。これは100秒69って意味みたい。 つまり、1分41秒って101秒だから、これって同じ数字です。でも、前の月と表示が違っていると、比較とか、すごくしにくい…。 ということで、前の月
ユーザーの検索意図を狙うSEOの最新動向を住氏が解説！ 売れるサイトにするための4つのポイントとは？ | 【レポート】Web担当者Forumミーティング 2018 Autumn
世の中のSEO情報のほとんどは「広告収入のためにPVを増やす」方法論近所のお客さんだけではやっていけない地方の企業にとって、インターネットでの売上や引き合いは死活問題だ。そういう企業にとっては、世の中に多く出回るSEO情報が役に立たない。ネットや書籍の記事は「広告収入で生きているサイトがPVを集める方法論ばかり」だと住氏は言う。たとえば以下のようなものだ。 ブロガーによるブロガー向けのSEO情報アフィリエイターによるアフィリエイター向けの情報CGMサイト（ブログサービスの運営者など）がPVと広告収入を伸ばすための情報もちろん、事業モデルは広告収入だという媒体社であれば、その方法論は正解だ。しかし、多くの企業は、商品やサービスの対価として受け取る売上が収入源であり、知りたい人に知識を教えてあげるのが仕事というわけではない。だから、「知りたい人」ではなく「買いたい人」を集める必要がある。 Go
リッチリザルト テストがコードでの検証をサポート。構造化データを編集しながらチェック可能
[レベル: 中級] リッチリザルト テスト ツールがコードでの検証をサポートしました。 構造化データのコードを編集しながらの検証が可能です。 これまでは URL を入力して、公開しているページの検証しかできませんでした。 昨年 11 月の Chrome Dev Summit でアナウンスされていた機能拡張です。 RRTT でコード検証 リッチリザルト テスト ツールにアクセスすると、「URL」と「コード」の切り替えができるようになっています。 コードを選択し、検証したい構造化データを貼り付けて、テストを実行します。 画面左には貼り付けたコードが出ているので、修正しながら検証を継続できます。 構造化データの公開前の検証が可能になったのは非常に便利です。 エラーを修正したりコードを調整をしたりといったことが事前にできます。 ただし、注意点があります。 リッチリザルト テスト ツールがサポートと
イメージスケールを使ってWebサイトの配色を論理的に決める方法 | ベイジの社長ブログ
デザインをやっていて特に難しいと感じるのが、色の決定です。色は、言語化できない心理的なイメージに作用するため、デザイナーとしては慎重にならざるを得ません。しかし残念ながら、私自身は、色に関して天才的なセンスを持っているわけではありません。そこで、配色のためのツールや配色理論などを用いて色を決定していくのですが、その過程で特によく使うのは言語イメージスケール（©小林重順／日本カラーデザイン研究所）です。その一連のプロセスを、実際に関わった某学習塾サイトを例にご紹介します。 キーワードの抽出 配色の決定にあたり、まずは学習塾のパンフレットや広告、既存のWebサイトなどの情報を収集し、ブランドキーワードの抽出を行いました。結果として、以下のようなキーワード群を抽出しました。 安心、安全、堅実、真面目、確実、知的、本物、楽しい、明るい、健全、のびのび、元気な、豊か、丁寧、親切、誠実 ここでは、「塾
【保存版】配色アイデアに迷わない、すごい配色カラーパレットツール107個まとめ
「配色えらびのベストな方法が知りたい」 「イメージにあった色をもっと手軽に選びたい」 「色がなかなか決まらない」 「配色えらびにAIを活用してみたい」 この記事では、配色えらびが苦手なひとに役立つ無料ツールをまとめてご紹介します。 ２０１６年８月の初投稿から９年かけてわたしが見つけた、実践向けの配色ツールをカテゴリ別に揃えました。 リンクの切れたツールは削除し、新しいデザインツールを追加した最新版にアップグレード。 配色の基本ルールを頭に入れておけば、お気に入りの色を効果的に見つけることができますよ。 コンテンツ目次 普段使いできる便利ツール（17個） ワンクリック、人工知能系ツール（20個） マテリアルデザイン系ツール（4個） Webデザイン・UIデザイン関連ツール（21個） 写真から抽出系ツール（2個） インスピレーション系ツール（14個） グラデーション関連ツール（29個） 配色カラ
WEBサイトのメインビジュアルデザイン制作時の参考資料 | 野良人（のらんど）
WEBサイトの顔・メインビジュアルのデザインを考える時にザーッと読んでから着手すると良さそうだぞっと思う参考記事をまとめました。そもそものデザインコンセプトを考えてから、レイアウトパターンを検討して、色んな参考デザインを眺めつつ細部を整えていく感じの流れです。あと書籍も。 設計・コンセプト WEBサイトの設計時に考えるべき内容かもですが、サイトの目的に照らしてメインビジュアルが担うべき役割を検討する際に参考にしたい記事をピックアップ。 デザイン提案に説得力を持たせる6つのステップ（スライド付き） | ベイジの社長ブログ WEBサイト全体の設計の話だが、考え方とか非常に勉強になるので読んどく。 5STEPでブランドイメージを的確に表現できるデザイン方法 | FICC BLOG | FICCのデジタルマーケティングブログ これもデザイン全般の話ではあるが、ブランドイメージを表現するためのキーワ
デザイン提案に説得力を持たせる6つのステップ（スライド付き） | ベイジの社長ブログ
Webサイトのデザインの方向性決めというのは、検討が長引いたり、スケジュールの遅れに繋がったりする要注意ポイントの一つです。弊社も例外ではありませんが、一方で、デザインに至った過程を丁寧に解説することで、スムーズに進めることは可能であるとも感じています。ここでは、デザインコンセプトを自然に理解していただくために弊社が行っている提案方法を共有しようと思います。 以下のスライドは、実際に使われたスライドです。公開用に細部は少し変えましたが、内容はほとんどそのままです。 クライアントは、株式会社マネジメントサービスセンター（以下、MSC）という企業の人事戦略や人材育成の支援を行っているB2B企業です。ターゲットは人事部や経営層などで、前段として戦略、設計が完了し、ベースとなるデザイン案を初めて提案する際に使ったものです。こちらを元に、ステップごとに細かな解説をします。（スライド中に出てくる検討プ
イラストやデザインの参考資料に！人物・動物・植物・デジタル機器・建物・家具などを図版化 -Dimensions.Guide
人物・動物・植物をはじめ、デジタル機器、建物、家具など、日常で見かける標準的なさまざまなスペースとサイズを図版化したDimensions.Guideを紹介します。 人物だけでも、老若男女の立ち・座り・寝・歩き・運動、そして正面・側面・上面が揃っており、イラストやデザインの参考資料になると思います。 Dimensions.Guide Dimensions.Guideではさまざまな図版が揃っています。 例えば、25-45歳の女性が歩いている時のサイズ。 平均身長は1.63mに設定されており、カジュアルな服装で歩いている横向きです。 Walking Female Side 素材はすべて商用でも無料で利用できます、クレジットは特に必要ありません。ただし、素材そのものを再配布・再販売することは禁止です。詳しくはライセンスページをご覧ください。 legal ダウンロードできる素材のフォーマットは、3種
最近Webデザイン界で流行っている「Duotone」をうまく使えば超イケてるサイトに様変わりするに違いない - Brian'z Imagination
その昔アンディ・ウォーホルという巨匠が描いたマリリン・モンローのポップアートのレプリカが4年くらい前にマンションに飾ってあったのを思い出すけれど、最近Webデザイン界では海外を中心に「Duotoneデュオトーン」と呼ばれるデザインが流行りだしている。 シンプルでありながら、ポップでビビッドで非常に印象に残るデザインなので、「Duotone」を極めれば超イケてるサイトになりそうな予感。 最近流行っている「Duotone」って何ぞ？ 「Duotoneデュオトーン」は「Duo(2つの)」＋「tone(色)」をあわせた言葉で、ベースとなるミドルトーンとハイライトカラーの2色を中心に描き出されるハーフトーン作品のこと。Duotone作品自体は昔から存在するのだけれど、昔のアーティストが一生懸命に写真をつなぎあわせていた時代から時が経ち、Photoshopのアップデートで簡単に写真を加工してDuoto
伝わりやすい不具合報告の書き方 #Zaim｜akatsuki174
はじめにこんにちは。Zaim で iOS エンジニアをしている @akatsuki174 です。 バグ報告ってどんな情報をどこまで渡せばいいのかの加減がうまくつかめず、意外と難しいですよね。会話の往復が増えると、タイムロスしたり、ちょっと険悪なムードになりかねません。 そこで、いちエンジニアの立場から「こんな風に言ってもらえると嬉しいよ！」という話をしようかと思います。ただ、あくまでもこれは一例です。プラットフォーム、会社などによっては別のことを伝えた方がいい場面もあるかと思うので、「こんな記事あったんだけれど、うちではどんなコミュニケーションが最適なんだろう？」と社内に問いかけてみてください。 絶対に伝えてほしいこと発生環境 具体的に言うと OS、OS のバージョン、ブラウザの種類、ブラウザのバージョン、スマホの機種、アプリのバージョン、実行環境（本番/ステージング etc）などがこれに
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
https://www.jil.go.jp/institute/zassi/backnumber/2014/04/pdf/026-029.pdf