週刊Webテク通信

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

ネットで見かけた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 カラーリングしたコードから画像を作るサービス

おすすめ記事

記事・ニュース一覧