【デザイナー不要？】中小企業のためのちょっとしたWEBデザインツール【しかもほぼ無料】
[No Designer Needed?] Handy Web Design Tools for Small and Medium Businesses [Mostly Free, Too]
株式会社アシッドハウスの芦田 哲也です。
今回の記事は、そんな方のためにお役に立ちそうな方法をご紹介します。
テキストやページレイアウトの修正はWordPress
サイト内のテキストやページレイアウトの変更はCMSを使いましょう。
CMSという用語を聞き慣れない方のために、以下を掲載しておきます。
ウェブサイト、ポータルサイトの構築、管理によく使用される。
ウェブページを作成し、運用するには、HTMLファイルや、それを保存するディレクトリ構造などについての知識が必要だった。コンテンツ管理システムでは、技術的な知識がなくても、テキストや、画像等の「コンテンツ」を用意できれば、ウェブによる情報発信をおこなえるように工夫されている。また、テンプレートの選択により全体のデザインを容易に変更することができるなど、省力化にも役立つ。
平たく言うと、Wordで書類を作るかのようにブラウザでページが作れる仕組みです。
CMSの代表格はWordPress。
最もポピュラーなCMSながらライセンス料は無料で、現在は世界中の25%のサイトにWordPressが組み込まれています（このサイトでもWordPressを使っています）
なので、今はCMSを使っていない人のほうが少ないだろうと私は思っていたですが、2018年にお付き合いのあったクライアントさんのLP(ランディングページ)では、CMSが使われていませんでした。
※CMSを使わないとFTPという方法（詳細を知りたい方はググってください）を使用することになるのですが、
- 自分でやる場合は、ある程度専門的な知識と技術が必要になる
- 外部パートナーを使う場合、依頼ごとにある程度の時間とお金がかかる
というデメリットがあります。
もしあなたの会社でCMSが入っていなかったら、できるだけ早めにCMSの導入して下さい。
※WordPressはWEBサーバーにインストールするものと、wordpress.comからブログを開設するものがありちょっと紛らわしいのですが、ここで指しているのはWEBサーバーインストールになります。
カバー画像、バナー等の作成ならCanva
オンラインでカバー画像やバナーなど、デザインテンプレートを基に加工してちょっとした画像を作成するならCanvaがよさそうです。
こちらはCanva公式のイントロダクションビデオ。
英語ですがどんな感じの機能なのか、操作感なのか大体おわかりいただけるでしょう。
なお、Canvaはスマホやタブレットのアプリも用意されています。
老舗・王道のAdobeが送り込んだ“Canvaキラー”も見逃せない
また画像編集といえば老舗・王道のAdobe CREATIVE CLOUD EXPRESSというアプリも見逃せません。
Adobeならではの使い勝手の良さが詰め込まれていますので、ご興味のある方はチェックしてみて下さい。
画像の切り抜き、サイズ、ファイル書き出し、レタッチ等はPixlr
画像の切り抜きをしたり、画像のサイズを変更したり、画像のファイル形式を変えたり、レタッチするときに使うツールです。要は人前見せるための身だしなみみたいなものですね。
具合的にやるのはこんな感じです。
- 画像の切り抜き：画像を見せる上で不要な部分を取り除く
- 画像のサイズ：WEBで表示するのにスムーズなデータ量になるように縦横サイズとデータ容量を変更する
- 画像のファイル形式：WEBで表示するのに最適なファイル形式に変更する（特に印刷データの二次利用など）
- レタッチ：画像のノイズを取り除いたり、明るくしたり色彩や色調を変更する
具体的な操作方法等は、今回は割愛します。
Pixlrはこれらをブラウザ上でさくっと行うことができます。
上記の作業をそこそこ頻繁に行うことが多かったり、数が多かったり、大掛かりな場合はAdobe Photoshop CCを使ったほうが断然いいです。
やはり有料で歴史あるソフトは使い心地や使い勝手が圧倒的です。
人物の背景を抜く場合はremove.bg
例えばバナーやサムネイル画像を作りたい場合に、人物の背景を抜きたい場合があります。
これを「たったの5秒で」実現するのがremove.bgです。
やり方は、remove.bgのサイトでファイルを読み込んで背景をクリックするだけ。
以前は高額かつ高度なスキルが必要なPhotoshopを使って手動で背景をシコシコと選択をいけなかったのが、無料でボタン数回の操作で解決するのですから、本当にいい時代です。
PixlrEditorとremove.bgの解説は動画でもどうぞ
作業効率化とビジネスの成長は別
ここまでツールをいくつか紹介しましたが、ちょっとした作業なら短時間・無料でWEBデザイン作業を行えるようになりました。
しかし、これらはあくまでも汎用的なツールであると、それと関係なくデザイン作業そのものに言えることですが、、、
出来あがったデザインが顧客にしっかりと訴求しているとか、行動させるとか、ビジネスの成長・マーケティングのためにチューニングされているかどうかは、また別の問題です。
その視点を持って作業を行なっているスタッフや外部パートナーは、かなり少ないのが現状です。
作業はあくまでも作業、です。
あなたがビジネスの成長・マーケティングの視点をもってハンドリングするか、よく理解している外部パートナーに依頼するようにして下さい。
併せてこちらの記事もどうぞ
From ACIDHOUSE, INC., this is Tetsuya Ashida.
Outsourcing takes time and money, though. Is there an easy way to update or revise it?
This article introduces approaches that should help people in that situation.
Use WordPress to Revise Text and Page Layouts
To change text or page layouts on your site, use a CMS.
For those unfamiliar with the term CMS, here is an explanation.
It is often used to build and manage websites and portal sites.
Creating and operating web pages used to require knowledge of HTML files and the directory structures in which they were stored. Content management systems are designed so that, without technical knowledge, people can publish information online as long as they can prepare content such as text and images. They also reduce effort by allowing easy changes to the overall design through template selection, for example.
In plain language, it is a system for creating pages in a browser as if you were making a document in Word.
The leading CMS is WordPress.
Although it is the most popular CMS, its license is free, and WordPress is currently used in 25% of websites worldwide (this site also uses WordPress).
So I assumed hardly anyone was without a CMS these days, but a client's landing page I worked with in 2018 did not use one.
Without a CMS, you use a method called FTP (Google it if you want details), which has these disadvantages:
- Doing it yourself requires a certain amount of specialized knowledge and skill.
- Using an external partner costs some time and money for each request.
Those are the drawbacks.
If your company has no CMS, introduce one as soon as possible.
WordPress can either be installed on a web server or used to create a blog through wordpress.com, which is slightly confusing. Here, I mean installing it on a web server.
Use Canva for Cover Images, Banners, and More
Canva seems good for creating simple images online, such as cover images and banners, by modifying design templates.
Here is Canva's official introductory video.
It is in English, but you should get a general idea of the features and how it operates.
Canva also has smartphone and tablet apps available.
Don't Miss Adobe's “Canva Killer,” From the Long-Established Industry Standard
Speaking of image editing, don't overlook Adobe CREATIVE CLOUD EXPRESS, an app from the long-established industry standard.
It is packed with Adobe's characteristic ease of use, so check it out if you are interested.
Use Pixlr for Cropping, Resizing, Exporting Files, Retouching, and More
It is a tool for cropping images, changing image dimensions, changing image file formats, and retouching. In essence, it's grooming your images before they appear in public.
More specifically, the tasks look like this.
- Cropping images: remove parts that are unnecessary when showing the image.
- Image size: change dimensions and file size to an amount of data that displays smoothly on the web.
- Image file format: change to the best format for displaying on the web, especially when reusing print materials.
- Retouching: remove noise, brighten the image, or change its colors and tones.
I will omit detailed operating instructions this time.
Pixlr lets you do these quickly in your browser.
If you do these tasks fairly frequently, in large numbers, or on a major scale, Adobe Photoshop CC is a much better choice.
Long-established paid software is far superior in usability and the experience of using it.
Use remove.bg to Remove Backgrounds from People
For example, when creating banners or thumbnail images, you may want to remove the background from a person.
The tool that does this in just five seconds is remove.bg.
Simply load a file on the remove.bg website and click the background.
Previously, you had to painstakingly select the background manually using Photoshop, which was expensive and required advanced skills. Now a few clicks solve it for free. It really is a wonderful time.
See the Video for an Explanation of PixlrEditor and remove.bg Too
Work Efficiency and Business Growth Are Different
I have introduced several tools, and for small tasks, you can now do web design quickly and for free.
However, these are general-purpose tools, and this applies to design work itself regardless of the tools...
Whether the completed design effectively appeals to customers, gets them to act, or is tuned for business growth and marketing is a separate question.
At present, very few staff members or external partners do their work with that perspective.
Work is, after all, just work.
Handle it yourself with business growth and marketing in mind, or entrust it to an external partner who understands those well.
かと言って外部に頼むと時間もコストも掛かる。手軽に更新や修正する方法はないか？