週刊Webテク通信

2018年8月第4週号 1位は，新しいウェブサイトを立ち上げるときにやるべきこと，気になるネタは，Evernote、10周年で新ロゴ発表（ゾウは健在）

Webテク, Webデザイン, Web広告, グラフィックツール, CSS, WordPress, HTML, JavaScript, Evernote

この記事を読むのに必要な時間：およそ 2 分

ネットで見かけた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を使ってコンテンツを最適化する
  • 公開日を厳守する
  • 連絡先を明記する
  • 何度も来るべきことを伝える

図1　新しいウェブサイトを立ち上げるときにやるべきこと

図1　新しいウェブサイトを立ち上げるときにやるべきこと

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. 強度を作る

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

    図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　ウェブ用グラフィックツールの比較記事

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

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

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

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

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

    図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用おすすめツール＆サービス

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

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

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

    Carbonhttps://carbon.now.sh/

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

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

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

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

    図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はまだまだ使い続けるつもりです。

Webテク, Webデザイン, Web広告, グラフィックツール, CSS, WordPress, HTML, JavaScript, Evernote

著者プロフィール

アシカガコウジ

フリーのWebデザイナー＆ライター。ポッドキャスト「アシカガCAST」でデジタル活用のヒントを発信中。シャープMZ-80Bからのパソコンユーザーで，Macintosh IIciからのMacユーザーでApple好き。Webテク情報やツール（ソフトウェア）の案内，デジタル活用情報をまとめた「アシカガノオト」をNotionで公開しています。

http://bit.ly/ashikaganote