WEB制作の工程は企画や設計・デザイン、マークアップ・システム制作などなど、たくさんの工程を経て完成する。企画段階や素材集め、マークアップの段階において、できる限り短縮したいものだ。このページではWEB制作に重宝する、便利な時短オンラインツールを紹介しよう。
デザイン系
写真合成を簡単に「Moose: Realistic Photo Collage」
URL：https://photos.icons8.com/
写真合成ができる、フォトコラージュ作成キャットだ。全く違和感なく複数の人物や背景、モノを掛け合わせられる。例えば未来の記事を書くとして、女性とロボットの対話画像が作れるのだ。現時点では架空の話をリアルに表現し、作れるので便利だと思う。
最近のWEBデザインにおいて、空間をうまく使いすっきりしたデザインが多くある。シンプルなサイトだからこそ画像が際立つだろう。ページ内容がより伝わる、印象的な画像が必要な時に使ってほしい。ダウンロードは有料となる。
モックアップツール
アプリ開発のスタートに使える「printable-mockups」
URL：https://alexadam.github.io/demos/printable-mockups/index.html
オンラインでモックアップ作成ができるサービス。DevTool表示からサイトのソースを画面右上の“Drop your design here”というエリアにドラッグ＆ドロップするだけで、自動でモック画面にはめ込まれる。
iPhoneのモデル変更をしたり画面上に複数のデザインを並べたりと調整可能。そのまま“Download image”でデータをダウンロードできる。
アプリ制作スタート時に良く使う。プレゼン資料で使う時やとりあえずクライアントに経過を見せたい時に便利だ。コンセプトの段階で修正が入れば、早い段階で調整に入れるので無駄な構築も減ると思う。しかも、無料で利用できる。
デザインからコードへの変換系
コードなしでテンプレート作成「Bulma Builder」
Bulmaは自分が良く使うcssフレームワークの1つだ。その「Bulma」専用のエディタ、ビルダー機能を使い、コードを書かずにテンプレが作れるサービスだ。ヘッダーやコンテンツをドラッグし、視覚的に移動する。コンポーネントとBulma設定を完了したら、ビルダーで作成したソースをダウンロード。ベースはフレックスボックスを駆使した作りになっていて、動きのあるフラットでトレンドをおさえたサイトに仕上がるだろう。
WEB制作の段階においてクライアントの課題を解決するという目的を果たすため、プロトタイプでどんどん提出し調整をスムーズに終え、最短でサイトを完成させたい。便利なオンラインサービスを活用して、最短で質の良いWEB制作を目指そう。