週刊Webテク通信

2018年11月第5週号 1位は,2018年のグラフィックデザインのトレンド,気になるネタは,iPhoneで「ヘイSiri,ヘイGoogle」 GoogleアシスタントがSiriショートカット対応

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

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

1. 10 Popular Graphic Design Trends on Dribbble in 2018https://icons8.com/articles/popular-graphic-design-trends-dribbble/

グラフィックデザインのトレンドを,Dribbbleに投稿された作品から導き出しています。グラフィックデザインといいつつ,ほぼイラストのトレンドでした。

  1. プロポーションが普通じゃない人物キャラクター
  2. 情報を伝えるためにインターフェイスに使われるイラスト
  3. アニメーションするロゴ,グラフィックス
  4. プロセスと仕事場のイラスト
  5. 面白いマスコットと異形の生物
  6. あらゆる種類の躍動感
  7. 表現力が豊かな影とネガティブスペース
  8. 3Dグラフィックス
  9. インターフェイスを備えたイラスト
  10. 複数のレイヤーがあり切り抜かれたイラスト

図1 2018年のグラフィックデザインのトレンド

図1 2018年のグラフィックデザインのトレンド

2. Blocs - Fast, easy to use and powerful visual web design tool, that lets you create responsive websites without writing code.https://blocsapp.com/

コーディング不要で簡単にレスポンシブなサイトが作れるビジュアルウェブデザインツール「Blocs」のバージョン3が登場しました。オンラインツールではなく,Mac用のアプリケーションです。

Bootstrap 4をベースにしています。CMSの統合サポート,ローカルでのPHPプレビューなど高度な機能もあるようで,興味深いです。

図2 ビジュアルウェブデザインツールBlocs

図2 ビジュアルウェブデザインツールBlocs

3. 10 Tools & Apps for Testing Your Responsive Design | Design Shackhttps://designshack.net/articles/mobile/tools-apps-for-testing-responsive-design/

レスポンシブサイトをテストするツールとアプリをまとめています。Googleのモバイルフレンドリーテスト以外は,ほとんどが複数のスクリーンサイズをシミュレーションする表示チェックツールです。

LambdaTestは,ただ画面サイズを変えるだけでなく,モバイルデバイスのエミュレーター/シミュレーターを使った表示テストができるサービスです。モバイルデバイス以外にも,Windows/Macの各種ブラウザでの表示テストもできます。

わたしはBrowserstackというツールを有料で使っているのですが,このLambdaTestも良さそうだなと思いました。

図3 レスポンシブサイトのテストのためのツールとアプリ

図3 レスポンシブサイトのテストのためのツールとアプリ

4. Essential Elements for Blog Design | SpyreStudioshttps://spyrestudios.com/essential-elements-for-blog-design/

ブログデザインの必須要素をまとめた記事です。

  • 良いUX
  • シェアボタンとコメント
  • 適切に構造化されたテキスト
  • 内部リンクと関連記事
  • モバイルファーストのデザイン

図4 ブログデザインの必須要素

図4 ブログデザインの必須要素

5. minstyle.io - A simple and light CSS framework !https://minstyle.io/

minstyle.ioは,シンプルで軽量なCSSフレームワークです。

たとえば,ボタンの色を緑にするには「ms-green」⁠角丸にするには「ms-rounded」など,わかりやすいクラス名の規則になっています。

本来,クラス名は見た目ではなく機能や用途を表す名前にすべきですが,フレームワークの場合はこのルールより利便性を取ってOKだと思います。

図5 シンプルで軽量なCSSフレームワーク

図5 シンプルで軽量なCSSフレームワーク

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

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

Online Logo Maker | Make Your Own Logohttps://placeit.net/online-logo-maker

Online Logo Makerは,オンラインで簡単にロゴを作成できるサービスです。ハメコミ合成写真を作るオンラインツールPlaceitが提供しています。

業種のカテゴリーを選び会社名を入力するだけで,いろいろなパターンのロゴが生成されます。気に入ったものがあればクリックして,さらに細かくカスタマイズできます。ロゴが入ったパッケージデザインの合成写真も生成するのが,さすがPlaceitのツールというところです。

ウェブサイト制作サービスのSquarespaceが提供するSquarespace Logo,ネットショップのプラットフォームShopifyが提供するLogo Maker & Logo Creatorなど,何かしらのオンラインサービスを提供しているところが,ユーザー獲得の一助としてロゴ作成サービスも作るケースが増えているようですね。

図6 Placeitが提供するロゴ作成サービス

図6 Placeitが提供するロゴ作成サービス

今週の気になるWebネタ

iPhoneで「ヘイSiri,ヘイGoogle」GoogleアシスタントがSiriショートカット対応 - ITmedia NEWShttp://www.itmedia.co.jp/news/articles/1811/21/news107.html

GoogleアシスタントがSiriショートカットに対応し,Siriを起動したあと「オッケーGoogle」などの呼びかけで起動できるようになりました。音声で命令できるアプリなので,最初の起動も音声でできるのは便利です。

Googleアシスタントを使えば,iOS上でもGoogle Home同等のことができるのは,意外と知らない人も多いと思います。Google Homeの購入を検討しているiPhoneユーザーには,Googleアシスタントを試すことをオススメするといいでしょう。

わたしは,Siriショートカット自体をこれまで使ったことがありませんでした。⁠ショートカット」というApple純正アプリを入れて,自分の設定したフレーズでSiriに話しかけることで,特定の動作を実行したり,一連の動作を自動で行わせることもできるそうです。

著者プロフィール

芦之由(あしのよし)

Webデザインやサイト制作に役立つブログ記事やニュースをほぼデイリーでお届けするメルマガ「デイリーWebテク」発行人。フリーのWebデザイナー兼イラストレーター&ライター。シャープMZ-80Bからのパソコンユーザーで,Macintosh IIciからのMacユーザー。嫌いな言葉は「IEで見ると表示が崩れてるよ」。

デイリーWebテクの購読やバックナンバーについては,以下の紹介サイトをご覧ください。

デイリーWebテク - Webテク関連の話題を毎日配信 -
URLhttp://www.rgs680.com/dwt/

コメント

コメントの記入