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

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

FigmaとSketchの比較記事です。

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

Sketchの良い点

Figmaの良い点

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

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

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

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

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

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

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

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

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

ジョニー・アイブ氏、Appleを退社し、デザイン企業「LoveFrom」立ち上げ Appleは顧客に - ITmedia NEWS
「⁠ジョブズが生きていたら…」と同じように「アイブがいたら…」と言われるようになりそうです
LINEのAI技術を販売する「LINE BRAIN」開始チャットbotや文字認識、音声認識技術を提供 - ITmedia NEWS
「⁠LINE BRAINの3技術はいずれも日本語の認識で高い精度を誇る」とのことです
怪しいサイトにユーザーがフラグを付けるChrome拡張機能 | TechCrunch Japan
危険なサイトへの移動や危険なファイルのダウンロードを試みると警告をユーザーに表示する拡張機能です

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

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

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

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

LINEがグループトーク機能を拡張した「OpenChat」（⁠オープンチャット）を発表しました。Facebookのグループ機能と似たような使い方ができそうです。

友だち登録しなくてもURLで招待でき、名前とプロフィール写真をトークルームごとに変更できるそうです。誰でも参加できるタイプと、管理人の承認が必要なタイプとを選べ、ルームを検索することもできるとのこと。

ママ友、おやじの会のやりとりに向いてるのはもちろん、ビジネスのやり取りにも便利かもしれません。Facebookのグループだけでなく、ChatworkやSlackとの比較対象にもなりそうですね。