参考になったサイトまとめ　2016/12

個人的に覚えておきたいと思った参考になる記事の2016年12月に読んだ分まとめです。

日々、インターネッツを徘徊して技術やデザインに関する最新の動向をキャッチアップしたり、勉強した気分になったりしていますが、きちんと整理しないと身につかないので今月から始めてみます。

デザイン

UI・UX

• 【これは便利】あなたのWebサイト表示のどこが遅いかを一発で調べるブックマークレット | 編集長ブログ―安田英久 | Web担当者Forum 表示速度を改善するときに便利そうなので使ってみたい
• UI設計とウンコの話。 – 笑顔を創りたいWeb屋の日常 トップページやグローバルナビゲーションについて。”グローバルナビゲーションをクリックするときは、そのページを下まで読んだあとでなければ（UXとしては）おかしい”
• 数千ページのワイヤーフレームを書いてきたWebディレクターがUI設計時に気を付けている８つのこと。 – 笑顔を創りたいWeb屋の日常 設計前に読んでおきたい。

素材・フォント

• アイコン素材ダウンロードサイト「icooon-mono」 | 商用利用可能なアイコン素材が無料(フリー)ダウンロードできるサイト | 6000個以上のアイコン素材を無料でダウンロードできるサイト ICOOON MONO モノトーンのアイコン
• 【無料素材】シームレスパターン|ダウンロードサイト|イラストレーター　フォトショップデータ配布 eps,jpg
• 2017年用、日本語のフリーフォント260種類のまとめ -商用サイトだけでなく紙や同人誌などの利用も明記 | コリス 多い。整理したい。

開発

HTML

今月はHTML5.1に関して、界隈でちょっとざわついた印象。

• HTML 5.1で変更されたsection要素の使い方、header要素とfooter要素のネストについて解説 | コリス W3Cに則ってHTML5.1ではh1の複数使用はナシ／header要素とfooter要素のネスト
• h1要素は複数回使って良いのか!? HTML5.1に関するW3CとWHATWGの主張の違い – Togetterまとめ W3C…ナシだよ／WHATWG…アリだよ
• HTML5 HTMLに関するW3CとWHATWGの立ち位置
• “地味にスゴい”ってホント!? わかりやすくHTML5.1の追加された新機能を紹介｜ferret [フェレット] 覚えること多い…

CSS

• これは簡単でいいね！コンテンツの区切りを斜め線にするテクニック（レスポンシブ対応） -Angled Edges | コリス コンテンツ間の区切りを斜めにするSassのMixin
• CSS3のアニメーションで「ふわふわ」「ゆらゆら」させる方法や便利なオンラインツール | コムテブログ CSS3のanimationでアニメっぽい動きを実現するためのツールの紹介。
• CSSのみでテキストを「飾る・動かす」おしゃれなエフェクト10 | コムテブログ いい意味でキモいやつ
• CSSの参考になるアイデアが満載！2016年スタイルシートを使ったテクニックのまとめ | コリス いい意味でキモいやつその2
• 文字詰めできるCSSのfont-feature-settingsが凄い！ 日本語フォントこそ指定したい自動カーニング – ICS MEDIA はい便利
• CSS3のFlexboxを基本から理解して、使い倒そう！ | 株式会社LIG flexboxの基本。図入りで見やすい。プロパティとかを忘れた時に参照するやつ（スニペットに登録したからあまり見ないとは思うけど）。
• flexboxのバグに立ち向かう（flexboxバグまとめ） – Qiita IE以外にもsafariやchoromeのバグも。最近flexboxを積極的に取り入れるようになったのでしっかりチェック。
• 【第2弾】少しのコードで実装可能な20のCSS小技集 | Webクリエイターボックス 「iOSでボタンのスタイルをリセット：-webkit-appearance」と「線のオフセット設定：outline-offset」を押さえておきたい。
• CSSで実装できる可愛いデザインに使えそうなボタンデザインやホバーエフェクト 10＋ | NxWorld border-radiusの水平・垂直指定は把握してなかった。他のボタンも参考になる。

Javascript

• [JS]スマホの「プルダウンするとリフレッシュ」を簡単に実装できるスクリプト -PulltoRefresh.js | コリス 画面を引っ張って更新するやつ。簡単そうで良いので必要になったら参照して実装しよう。
• hiraku.js – オフキャンバスメニュー用 jQuery プラグイン をリリースしました | JavaScript | ブログ | 名古屋のCMS構築・Web制作会社 アップルップル 横からびろーんてなるスマホメニュー
• 2016年総まとめ、JavaScriptのライブラリやjQueryのプラグイン100+α選 | コリス 多すぎるので全部はチェックできないけど、なんか探すとき用に。
• PHPからJavaScriptに変数を渡すまとめ – Qiita カスタムデータ属性にphpの変数をechoで書いてjsから参照
• 担当サイトが受賞したので、アニメーションの演出に使ったJavaScriptライブラリ、webツールを晒してみる | 株式会社LIG スクロール系：scrollmagic／アニメーション系：Tweenmax／SVG系：Snap.svg／スライダー系：swiper／CSSのEasing：Ceaser／三角形：css-triangle-generator

WordPress

• WordPress：ログイン画面をオリジナルにカスタマイズする方法 | NxWorld ログイン画面のデザインカスタマイズ
• [WordPress] 管理画面に独自の CSS・JavaScript を適用させる方法まとめ ｜ memocarilog admin_print_stylesとadmin_print_scriptsのフック
• WordPressのテーマ内でjavascriptファイルを読み込む方法 | バックエンドへの道 wp_register_scriptのつかいかた

その他

SEO・アクセス解析

• JavaScriptで作られたコンテンツはHTMLよりもGoogleの評価が低いのか？ | 海外SEO情報ブログ SEO上の評価はHTMLでもJSでも変わらないけど、レンダリングできるかどうかチェックはしとけよという話。
• MFIへの疑問はこれで99.9%解消!? グーグル社員が20の質問に回答 などSEO記事まとめ10+2本 | 海外&国内SEO情報ウォッチ | Web担当者Forum MFIで対応すべきこと：モバイル側の構造化データの確認／モバイルUX・スピードの確認
• 長文ページほど検索上位に来るのはなぜか？ その鍵はコンテンツの「包括性」だ（前編） | Moz – SEOとインバウンドマーケティングの実践情報 | Web担当者Forum 範囲の広い質問のクエリでは包括性の高いコンテンツが有利
• 衣袋教授の新・Googleアナリティクス入門講座 コーナーの記事一覧 | Web担当者Forum 顧客に説明する前に復習するとき用

仕事・営業

• 上手にクライアントの情報を聞き出すならヒアリングシートが便利！目的別テンプレート18選｜ferret [フェレット] こういうの未だに試行錯誤な感じなので、次作るときには参考にしたい。
• サンプルでわかる提案依頼書（RFP）作成6つのポイント、発注内容の伝言ゲームは失敗の第一歩／第3回 | 中小企業のための失敗しないWebシステム発注・開発 | Web担当者Forum ヒアリングシートの参考に。
• 御社のウェブサイトは「簡単モドキ」になっていないか？　「簡単」のギャップが生まれる理由（第4回） | 見るゾウ！ 知るゾウ！ ユーザー像！ | Web担当者Forum “「簡単です」は提供者のセリフではない。”仰る通り、耳が痛い。
• 「了解しました」より「承知しました」が適切とされる理由と、その普及過程について | 株式会社LIG 「了解」は良く無いという根拠はなかったという話。

更新したブログ

• 3周年を迎えました 節目なので駄文をアレしました。
• AdobeCCの料金が約半額になった話+モリパスもお安く │ ノラWEB屋　野良人（のらんど） 要はAmazonで買うと安いぞという話。