ネットで見かけたWebテク（Webテクニック・Webテクノロジー）記事から，Webデザイナーの目で厳選したネタを週刊で紹介するこのコーナー。今回は，2018年8月13日～8月19日の間に見つけた記事のベスト5です。

1. How to Launch a New Website - Tips, Tricks and Insightshttps://line25.com/articles/launching-a-new-website

新しいウェブサイトを立ち上げるときにやるべきことをまとめた記事です。

• Google Analyticsを使う
• Google Search Consoleを使う
• 古いURLをリダイレクトする
• SNSアカウントを取得する
• 1ヵ月前にコンテンツを準備する
• 新しいサイトを立ち上げることを告知する
• 近日公開予定のバナーを作る
• 公開後少なくとも1ヵ月でのサイトの目標を設定する
• 技術的な細かいことを確認する
• サイトの速度をテストする
• SEOを使ってコンテンツを最適化する
• 公開日を厳守する
• 連絡先を明記する
• 何度も来るべきことを伝える

2. Black and White Design: 10 Stunning Examples (+ Tips) | Design Shackhttps://designshack.net/articles/graphics/black-and-white-design/

白黒のウェブデザインの実例とヒントを紹介しています。

1. 白黒写真
2. ファーストビューが白黒
3. リッチブラック（混色の黒）
4. ほとんど白
5. ほとんど黒
6. セカンダリーカラーを使わない
7. アクセントカラーのヒント
8. 芸術的要素がない場合
9. アニメーションのヒント
10. 強度を作る

図2　白黒のウェブデザインの実例とヒント

3. Sketch, Figma, Adobe XD, UXPin or InVision Studio: which one? | Koos Looijesteijnhttps://www.kooslooijesteijn.net/blog/Sketch-Figma-Adobe-XD-UXPin-InVision-Studio

ウェブ用グラフィックツールのSketch，Figma，Adobe XD，UXPin，InVision Studioを比較した記事です。

簡単な比較表があり，各ツールそれぞれの利点や足りないところなどを解説しています。

この記事の作者は，いろいろなツールを試してみた方が良いというスタンスでした。

図3　ウェブ用グラフィックツールの比較記事

4. Practical CSS Scroll Snapping | CSS-Trickshttps://css-tricks.com/practical-css-scroll-snapping/

スクロールに合わせて丁度いい位置に領域をスナップさせる，CSSのScroll Snapの使い方を解説しています。

デスクトップブラウザは結構対応していますが，モバイルブラウザはほとんど対応していないので注意が必要ですね。

図4　スクロールに合わせて領域をスナップさせるCSSの使い方事

5. Have you tried these essential WordPress tools & services? | Web Resources | WebAppershttp://www.webappers.com/2018/08/15/tried-essential-wordpress-tools-services/

WordPressユーザーなら試す価値のあるツールとサービスをまとめた記事です。

WordPress上でページをデザインするサイトビルダー的なものや，ユーザーレビュー機能を付けるプラグインなどが掲載されていました。

図5　WordPress用おすすめツール＆サービス

そのほか，最近の記事の中から，気になるニュース記事を紹介します。

• Twitter，レガシーAPIのサポート終了--状況など説明 - CNET Japan
  サードパーティー製のクライアントアプリに影響を与えるため批判も多いようです
• AI記者が高校野球の選評記事を自動生成 - 朝日新聞とみんかぶ | マイナビニュース
  電子スコアをもとに「戦評」を1秒で記事にまとめます
• Google検索に新しいスニペット追加――ユーザーは何クリックか節約できる | TechCrunch Japan
  「⁠単一の記事だけでなく検索の下位区分を提案するパネルを追加」したとのこと

先週の気になるWebサービス

Carbonhttps://carbon.now.sh/

CarbonはHTMLやJavaScriptなどのコードを画像にするサービスです。Mac OSのウィンドウにコードが表示されているようなイメージが作れます。Twitterにコードを投稿するのに便利です。

コードはプログラム言語に合わせて自動でカラーリングされますし，配色パターンも多数用意されています。フォントやフォントサイズ，行間，余白など，かなり細かく設定できます。

テキストは別にプログラムのコードでなくてもいいので，普通の文章を画像にする用途にも使えます。日本語も問題ありません。パラメーター付きのURLが自動で生成されているので，URLを記録しておけば後で再編集も可能です。

図6　カラーリングしたコードから画像を作るサービス

今週の気になるWebネタ



Evernote，10周年で新ロゴ発表（ゾウは健在） - ITmedia NEWShttp://www.itmedia.co.jp/news/articles/1808/15/news035.html

Evernoteが創業10周年に合わせてブランドを刷新，ゾウのマークはフォルムが変わって色も緑になりました。アプリのアイコンは白ベースに緑のゾウのマークとなっています。

ブランド刷新の経緯や詳細はEvernote公式アカウントによるMediumの投稿「Ever Better: Refreshing the Evernote Brand」に詳しいです。また，「⁠Evernote Official Digital Assets」からロゴやアイコンを入手できます。

調べてみるとわたしは2008年からEvernoteのアカウントを持っているので，使い始めて10年ということですね。最近はEvernote，Mac，iOS標準のメモ，Dropbox Paperとメモが散在しがちですが，Evernoteはまだまだ使い続けるつもりです。