週刊Webテク通信

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

ネットで見かけた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 ベースカラーをもとに濃淡を変えたカラーパレットを作れるサービス

おすすめ記事

記事・ニュース一覧