週刊Webテク通信

2019年7月第1週号1位は、 FigmaとSketchの比較記事、気になるネタは、LINE、グループトーク機能を拡張した「OpenChat」発表 友人以外も追加可、トークごとにプロフィール設定可能

ネットで見かけたWebテク(Webテクニック・Webテクノロジー)記事から、Webデザイナーの目で厳選したネタを週刊で紹介するこのコーナー。今回は、2019年6月24日~6月30日の間に見つけた記事のベスト5です。

1. Figma vs Sketch: Which is the best option you should choosehttps://www.designyourway.net/blog/resources/figma-vs-sketch/

FigmaとSketchの比較記事です。

以下の項目に分けて比較しています。

  • コスト
  • 使い始めの難易度
  • プラットフォーム
  • スピードとパフォーマンス
  • アクセシビリティ
  • 使いやすさ(機能とユーザーインターフェイス)
  • アイデア段階での使い勝手
  • シンボルとライブラリ
  • 共有スタイル
  • 完成品に近いモックアップの作成
  • より自由度が高く簡単なのは
  • 描画ツール
  • コラボレーション機能
  • インタラクティブなプロトタイプを作る
  • レビュー機能
  • ファイルの整理
  • デザインシステムの作成
  • インポート/エクスポート
  • プラグイン
  • バージョン管理
Sketchの良い点
  • キーボードショートカットが優れている
  • プラグインを追加できる
  • 優れたファイルタイプと拡張オプションがある
  • 実際のデータを使用できる
  • 成熟していてとてもよく設計されている
Figmaの良い点
  • 世界中のどのマシンからも使える
  • リアルタイムに共同作業できる
  • ファイルを共有するには1つのURLが必要
  • レスポンシブデザインに関してはリードしている
図1 FigmaとSketchの比較
図1 FigmaとSketchの比較

2. The Ultimate Guide to Flexbox Centering - Onextrapixelhttps://onextrapixel.com/flexbox-centering-guide/

Flexboxでのセンター揃えの完全ガイドです。縦方向、横方向のセンター揃えの方法を基礎から丁寧に解説しています。

結果だけでなく各プロパティがどう動作するかを確認するには、Flex — A FlexBox Builder.を使ってこの記事のコーディングのように設定してみると、分かりやすいと思います。

図2 Flexboxでのセンター揃えの完全ガイド
図2 Flexboxでのセンター揃えの完全ガイド

3. Building a Conference Schedule with CSS Grid | CSS-Trickshttps://css-tricks.com/building-a-conference-schedule-with-css-grid/

カンファレンスのタイムテーブルをCSSグリッドでレイアウトする方法を紹介しています。確かにこのような複雑なレイアウトは、CSSグリッドを使わないと実現が難しそうです。

もちろんレスポンシブで、モバイルの横幅では全てが時間順に縦に並ぶようになっています。

図3 タイムテーブルをCSSグリッドでレイアウトする方法
図3 タイムテーブルをCSSグリッドでレイアウトする方法

4. These 4 Website Redesign Mistakes Sabotage SEO | SpyreStudioshttps://spyrestudios.com/avoid-these-4-website-redesign-mistakes-that-sabotage-seo/

ウェブサイトのリデザインでSEOをダメにする4つの失敗をまとめています。

  1. サイトの表示スピードを気にかけない
  2. モバイルを2番目として扱う
  3. 情報アーキテクチャが複雑
  4. 単純化しすぎてコンテンツに影響を与える
図4 SEOをダメにする4つの失敗
図4 SEOをダメにする4つの失敗

5. Why are the username and password on two different pages? - Twiliohttps://www.twilio.com/blog/why-username-and-password-on-two-different-pages

ユーザー名の入力とパスワードの入力を違うページに分けるのはなぜかを解説した記事です。

フォームのUI/UXとしては良くないとされる、ユーザー名とパスワードを別ページで入力してもらう方法ですが、シングルサインオンとユーザー名/パスワードでのログインの両方に対応するためというのが主な理由でした。

また、セキュリティ的にも分かれている方が安全で、フィッシングサイトが似たログイン画面を作りにくいという効果もあるようです。

図5 ユーザー名の入力とパスワードの入力を違うページに分けるのはなぜか
図5 ユーザー名の入力とパスワードの入力を違うページに分けるのはなぜか

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

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

Create Sales Landing Pages That Convert, Fast & Easy | Brizyhttps://www.brizy.cloud/

Brizyは簡単な操作でコーディングの知識がなくてもランディングページを作れるサービスです。ページのテンプレートや各種ブロックをベースにすれば、プロっぽいデザインのページをすぐに作れそうです。

テンプレートはページ全体がレイアウトされたもので、ブロックはヒーローエリア、写真ギャラリー、価格表などのひとかたまりのベースとなるものです。空のブロックを元に自分でエレメントを配置していくこともできます。

あとからページ全体にわたって、配色やフォントをまとめて変えられる機能がいい感じです。ログイン不要でページ作成を試せますし、無料プランも用意されています。HTML/ CSSを書き出す機能があり、無料プランでも使えます。

図6 簡単操作でランディングページを作れるサービス
図6 簡単操作でランディングページを作れるサービス

おすすめ記事

記事・ニュース一覧