週刊Webテク通信

2019年10月第1週号 1位は，ウェブサイト作るのに必要な要素とそのコスト，気になるネタは，Facebook，「セカンドライフ」のようなVRワールド「Horizon」を「Oculus Quest」などで来年スタート

Webテク, Webデザイン, Web広告, UI, VR, アニメーション, CSS, カラーパレット

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

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

1. Website Design Cost & How to Save on Web Developmenhttp://www.webdesigndev.com/website-design-cost/

ウェブサイトを作るのに必要な要素とそのコストをまとめています。それを元に，どこで節約できるかのヒントとなることを考慮した記事です。

  1. ドメイン
  2. ホスティング
  3. SSL証明書
  4. デザイン
  5. 開発と技術
  6. CMS
  7. SEO対策
  8. 広告
  9. メンテナンス

図1　ウェブサイト作るのに必要な要素とそのコスト

図1　ウェブサイト作るのに必要な要素とそのコスト

2. Free Bootstrap UI Kit for Startup and SaaS Business | Ayro UIhttps://ayroui.com/

BootstrapをベースとしたUIキットです。400以上のUIエレメントが用意されており，完全レスポンシブです。

また，スライダー，価格表などのあらかじめよく使われる部品「セクション」が150以上あるとのこと。とてもよくできているので，ウェブデザインのヒントになりますし，テンプレートを作る時の参考にもなりそうです。

図2　BootstrapをベースとしたUIキット

図2　BootstrapをベースとしたUIキット

3. 8 Fantastic Pure CSS Border Effect Code Snippetshttps://speckyboy.com/css-border-effects/

ボーダー（境界線）をアニメーションさせるCSSコーディング例を，いろいろと紹介しています。

リンクやボタン，フォームの入力欄のボーダーをアニメーションさせることで，見た目が面白いだけでなく，うまく目立たせたり区別することができそうです。

図3　ボーダーをアニメーションさせるCSSコーディング例いろいろ

図3　ボーダーをアニメーションさせるCSSコーディング例いろいろ

4. STRML: Projects and Workhttps://www.strml.net/

CSSが自動でどんどん記述されていき，それに合わせて見た目も変わっていくアイデアが面白いサイトです。

サイズや色を決められるなど，双方向性や条件分岐があると，もっと楽しめるかもしれません。

図4　CSSの自動記述にあわせて見た目も変わっていくサイト

図4　CSSの自動記述にあわせて見た目も変わっていくサイト

5. Must-Visit Websites with Free and Premium Icons in 2019 - WPKlikhttps://wpklik.com/wordpress-tips/websites-with-free-and-premium-icons/

高品質で無料のアイコンをまとめた記事です。

フラットなデザインでカラーのものを中心に集めていました。

図5　高品質で無料のアイコンいろいろ

図5　高品質で無料のアイコンいろいろ

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

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

CopyPalette | Seamless color palette generationhttps://copypalette.netlify.com/

ベースカラーをもとに，濃淡を変えたカラーパレットを作れるサービスです。作ったパレットはSVGとしてコピーできます。

何段階の濃淡を作るかを数値で指定できます。ベースカラーを中心に入力した数値分の濃い色，薄い色が作られるので，数値を3にした場合には7色のパレットができるというわけです。コントラストも調整できます。

さらに細かいコントロールができる同様のツールとして，ColorBox by Lyft Designというサービスもあります。シンプルでわかりやすく，デザインツールにSVGとしてペーストできるところがCopyPaletteのいいところです。

図6　ベースカラーをもとに濃淡を変えたカラーパレットを作れるサービス

図6　ベースカラーをもとに濃淡を変えたカラーパレットを作れるサービス

今週の気になるWebネタ

Facebook，「セカンドライフ」のようなVRワールド「Horizon」を「Oculus Quest」などで来年スタート - ITmedia NEWShttps://www.itmedia.co.jp/news/articles/1909/26/news068.html

FacebookがVRワールド「Facebook Horizon」を発表しました。「⁠セカンドライフのような」と言われると不安を感じますが，全く違った使用感のものになるんだと思います。

VRヘッドセットを使って，仮想空間で会話やゲームプレイ，映画鑑賞などが楽しめるそうです。Facebookが運営するわけなので，Facebookの友達＝リアルの世界での知り合いとVR空間で会えるのというのは楽しそうです。

アバターが上半身だけというのが，かなり違和感があります。歩く動きを作らなくていいので楽というのもあるのでしょうが…。日本人っぽい顔のアバターも作れるといいなと思います。

Webテク, Webデザイン, Web広告, UI, VR, アニメーション, CSS, カラーパレット

著者プロフィール

アシカガコウジ

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

http://bit.ly/ashikaganote