ウェブデザイナーが使うアプリケーションとは？

ウェブデザイナーの仕事を細分化してみると・・・

• HTML/CSSやプログラム（PHP）などのコーディング・プログラミング
• カンプデザインの作成
• 画像やバナーの作成
• 動画の作成・編集
• 契約先より送られてくる資料の確認
• 作成したデータのアップロード

大まかですが、この5つが出来ればとりあえずウェブサイトを立ち上げることは出来ます。
もちろん、その中にSEO対策されたコーディング・見栄えが良くなるデザイン・飽きさせない動画編集・セキュリティ面などの知識や先方様がどのようなものを欲しているか、金額の調整などなど、色々なものが経験などで必要となってきます。

これからウェブデザイナーを目指している方は、まずアプリケーションを揃える必要があります。
私も新しいパソコンを購入したときやOSのリカバリーを行った際には、まず最初にいつも使っているアプリケーション環境を整えるところからスタートします。

快適な環境を整えて素晴らしいウェブサイトを作りましょう！

テキストエディター

テキストエディターとはコーディングを行う際にプログラムを記述していくためのアプリケーションです。
これがなくては、ウェブページの基礎でもあるHTMLを書くことが出来ません。

もちろん、windowsに最初から入っているメモ帳でも作ることは出来るのですが、メモ帳はあくまで「メモ帳」なのです。
プログラムをコーディングするために作られてはいないので、メモ帳でコーディングするとものすごく大変です。まず見づらいですし・・・

まずは基礎の基礎、テキストエディターをご紹介します。

Sublime Text

Sublime Textの公式ページ

オーストラリアのSublime Hq Pty社が出しているテキストエディター「Sublime Text」です。
もう６～７年愛用しているかと思います。

シェアソフト（有料ソフト）でライセンス料は2021年6月時点でUSD $99となっています。
無料でも使えますが、数回ファイルを保存すると「有料版を使いませんか？」という告知みたいなのが表示されます。

様々なプラグインをつけることができます。これが非常に便利です。
また、Windows・Mac・Linuxに対応しています。

何が良いかというと、動作が非常に軽いところですね！
フォントをAdobe社から出ている「SourceHanCodeJP」にするとより視認性が良くなります。

「Source Han Code JP」日本語のテキスト表示も考慮されたコーディング向けのフォント – 窓の杜

こういった専用のテキストエディターの特徴としては、プラグインが充実しているところです。
そのプラグインを使えば、例えばプログラムのタグごとに色分けしてくれたり、タグを途中まで打てば予測変換を出してくれたりします。

現在は、バージョン4の安定版が出ています。私が使っているのはバージョン3ですがそのうち4にしようと思っています。

コーディングの時間を短縮してくれるというかなり強い機能があるので、ぜひ使ってみてください。

Visual Studio Code

Visual Studio Code

Microsoft社が出しているテキストエディターも少しご紹介します。「Visual Studio Code」です。
動作が重いので私は使っていませんが、このアプリケーションも非常に優秀です。

デザインカンプ作成ソフト

まずはデザインカンプとは？ということろですが、要するにウェブページの「完成見本図」です。

この完成見本図はかなり作り込みます。ただ、出来上がるのはあくまで画像です。
この画像を見ながら、先程のテキストエディターなどでHTMLやCSSのコーディングを行っていきます。

WEVOLUTIONでも、最初にデザインカンプを先方様にご確認いただいた上でコーディングを進めています。

Adobe XD

Adobe XD

ご存知Adobe社が提供しているウェブページのデザインカンプ作成に特化したアプリケーションです。
これが発表されるまでは同じくAdobe社のPhotoshopやIllustratorを使っていましたが、正直カンプ作成としてはちょっと使いづらかったです。

Adobe XDでは、使いづらかった点が改善されており完全にデザインカンプ用に特化されています。

例えば、コンテンツの均等割り付けがボタン一つで出来たり、ウェブページでよく使われるボタンなどの素材が豊富です。

特に使いやすいのは画像を拡大・縮小するときに画像を割り付けられた範囲で縦横比が崩れずに出来るところです。
しかも、完成したデザインカンプはAdobe社のクラウドスペースにアップロードでき、簡単にシェア出来ます。

もうこれ意外でデザインカンプを作ることはないだろうというくらい、非常に使いやすいです。

もちろんシェアウェアです。過去Adobe社から提供されていたアプリケーションは買いきりでしたが現在ではサブスクリプションのみとなります。
Adobe XDの単体価格は月額1,298円（2021年6月時点）ですが、こういったサブスク系は価格が常に変動しますので下記リンク先でご確認ください。

XDの個人向け価格 | 無料スタータープランの情報 | Adobe XD

画像編集ソフト

正直画像編集に関してはAdobeの独壇場です。
逆にこれがあればデザインに困らないと思います。

この画像編集ソフトですが、ウェブページではバナーやスライダーのデザインで使いますがそれ以外にも、
名刺・看板・ポスター・POP・ロゴ・イラスト・冊子などなど、デザイナーには欠かせないアプリケーションです。

Adobe Illustrator

Adobe Illustrator

Adobe社より提供されている超有名アプリケーションです。「イラレ」と略されて呼ばれています。
普段見かける店舗の看板はもちろん、POPやパッケージのデザインなど。デザインが関わるものに関してはおそらく80～90％くらいはこのアプリケーションが使われています。

ベジェ曲線といわれる特徴的な曲線を使ってデザインしていきます。
習得までは慣れが必要ですが、ピクセル単位でファイルを保存するものと違い、座標単位でファイルを保存するのでファイル自体が非常に軽量です。

さらに、座標保存なのでどれだけ拡大しても劣化しないという特徴があります。
A4サイズで作成されたデータをA1サイズで印刷したとしても劣化しません。

当然ながらシェアウェアで単体価格は月額1,848円（2021年6月時点）となっています。
それに見合う価値があるアプリケーションですね。

ちなみに昨日公開したフリー素材もIllustratorで作成しています。

【フリー素材】トイレをいつも綺麗にご使用頂きありがとうございます。

Adobe Photoshop

Adobe Photoshop

写真加工に特化したアプリケーションです。「フォトショ」と略されて呼ばれます。
写真の色味やエフェクトなどIllustratorではカバーできない写真の加工はこちらで行います。

写真のホワイトバランスや色調の調整はもちろん、リタッチや写真に不要なものを消し去る機能などがあります。
例えば、先方様の自社ビルの写真を使いたいという場合に、ビルの周りにある車や電柱・電線を消したいという場合に使ったりします。

こちらもシェアウェアで単体価格はIllustratorと同じく月額1,848円（2021年6月時点）となっています。

番外編：脱Adobe出来るアプリケーション「Affinity」

Affinity

イギリスのSerif Europe社が提供しているAffinityシリーズです。
Affinity DesignerがIllustratorでAffinity PhotoがPhotoshopと互換性があります。

イラレやフォトショのファイルを開くことができ、ほぼ同等の機能で編集をすることができます。
特徴としてはサブスクリプションではなく買い切りで提供しているというところです。

定価で6,100円ですがセールで半額の3,060円になっています。（2021年6月現在）

Adobe社のアプリケーション2ヶ月くらいで元が取れますね。
まずは「イラレやフォトショがどんなものか使ってみたい」や「そこまで本格的に使わないからライトに使いたい」という場合は導入する価値はあると思います！

動画の作成・編集ソフト

いま、動画ブームがかなり来ています。Youtubeの影響ですね。
ウェブデザインでも動画を載せたい、自社CMを作りたいという需要があります。

Adobe Premiere Pro

Adobe Premiere Pro

動画の編集に最適なアプリケーションです。
有名Youtuberやテレビ、映画にも使われます。

最近では「シン・エヴァンゲリオン劇場版」でもPremiere Proが使われています。

『シン・エヴァンゲリオン劇場版』、膨大な素材と緻密な編集を支えたAdobe Premiere Pro

何が出来るアプリケーションかというと、動画の切り貼り・編集・加工と音声の切り貼り・加工・音量調整が出来ます。
そして、Adobe社提供のアプリなのでIllustratorで作成したファイルをそのままPremiere Proで使うことが出来ます。

ロゴやテロップの背景をIllustratorで作成して、Premiere Proで表示させるという使い方が出来ますので非常に便利です。

動画の編集も、不要部分をカットしたとしても後からカットした部分を復元できたりと動画編集では欠かせないアプリケーションです。

単体価格は月額1,848円（2021年6月時点）です。

Adobe After Effects

Adobe After Effects

こちらも動画に関連するのですが、アニメーションを作ることが出来るアプリケーションです。
テキストをアニメーションさせたり、動きが多いスライドショーを作ったりするのはこちらで作成します。

ちなみに、1コマ1コマアニメーションを書き出すのでめちゃくちゃ重たいです。
十分な空き容量とハイスペックなPCが要求されます。

（私の環境ではメモリー不足で急に落ちたりします・・・）

単体価格は月額1,848円（2021年6月時点）です。

Adobeのアプリケーションについて

ちょっと脱線して、Adobeのアプリケーションについて少し説明します。
Adobe社からはPhotoshop・Illustrator・Premiere Pro・After Effects・XD・Adobe Acrobat Readerなどなど、デザイナー業には不可欠なアプリケーションが多数提供されています。

こちらは、各アプリケーション単体で契約することも出来ますが、おすすめなのはCreative Cloudを一括で契約するプランです。
29ものアプリケーションを使うことができ、月額6,248円（2021年6月現在）です。

私はこのプランで契約しており、Adobe Stockという写真素材を配布しているウェブサイトを利用することも出来ます。
私の仕事では必須なのでしっかり契約しています。

ちなみに、学生さんの場合は教員・学生向けのプランが用意されており月額2,178円（2021年6月現在）で使えます。
学生証の提出が必要ですが、間違いなくお買い得なので学生の皆さんはこちらのプランで契約しましょう。

どの企業でも使われる定番アプリケーション

Microsoft Office 365

Microsoft Office 365

ド定番なんですが、このアプリケーションがないと仕事にならないです。

というのも、Google社より提供されているGoogleスプレッドシートやGoogleドキュメントがありますが、再現性に乏しく先方様から送られてきたWordやExcelのファイルを開いても崩れることが多々あります。

ウェブページのコンテンツのラフスケッチと呼ばれる、「画像をここに配置して、文章はこれにしてください。」という指示書は大抵の場合Word・Excel・PowerPointで送られてきます。
この表示が崩れると、せっかく作ったのに全然違ったものを作ることになってしまいます。

ですので、表示が崩れない・完全に再現できる同一のアプリケーションを用意する必要があります。
実は何よりも必須のアプリケーションです。

今のところ、9割以上の企業から指示書はMicrosoft Officeのアプリケーションで作られたファイルで送られてきますので必ず入れておきましょう。

こちらもサブスクリプションで月額1,284円（2021年6月時点）です。

作成したデータのアップロードソフト

作成したファイルをサーバー上にアップロードして初めてウェブサイトとして閲覧することが出来るようになります。
このサーバーへのアップロードを行うアプリケーションは「FTPソフト」と呼ばれます。

よりバックエンド側の操作に慣れている方はターミナルからSSH接続してファイルの転送を行うのでしょうが・・・
今回は初心者向けということで；

レンタルサーバーであれば、サーバーを提供している会社ごとにファイルマネージャー的なウェブアプリケーションを出している所もありますが、
複数あるサーバー会社のページにいちいちログインして・・・というのも手間なのでFTPソフトを使用します。

FileZilla

FileZilla

Tim Kosse氏が作成したFTPソフトです。
こちらはフリーソフトで使用できます。最初は全て英語ですが、設定で日本語にすることもできます。

FTPの定番アプリケーションで、逆に言えばこのアプリケーション以外のFTPソフトがあまりありません・・・。

ファイルを目視しながらアップロード出来るので非常に便利です。

まとめ

5選といいつつ、おまけも含めると10個くらい紹介しましたね…。
パソコンが普及し始めた当初は一太郎とかサクラエディタとかありましたが、国産ソフトは絶滅気味ですね悲しい・・・

今回初回したアプリケーションはウェブデザイナー業では必須なものばかりなので、必要経費としてしっかり契約しておきましょう。
海賊版とか使うと後々でめんどくさいことになるので、ちゃんと正規のもので契約することが大事です。

もっとも、Adobe系のアプリケーションは一社独占状態なのでAffinityには頑張って欲しいですね！
競合が出来ると価格競争が起きますし。

ということで、現役ウェブデザイナーが使っているアプリケーションの紹介でした！

The post 現役webデザイナーが使っているアプリケーション5選！ first appeared on 苫小牧のホームページ制作ならWEVOLUTION.

元も子もないですね・・・
見出しからして出落ちしてます←

まあ、正直こだわらなくても良い部分でもあるんですよね名刺って。
会社名・名前・住所・電話番号・メールアドレスくらいがあればとりあえず名刺の要件は満たしてるので、自分で作るとか出来ちゃうんですよ。

特に今だとそれっぽいデザインのテンプレートに情報を入力して完成！っていう便利なサービスもありますしね。

では、テンプレートの名刺とオリジナルの名刺だとどれくらい違うのか？というのをご紹介します。

WEVOLUTIONの名刺を見てみてください

このブログを読んている方の中には、既にこの名刺持ってるよっていう方もいらっしゃるかと思います。

一応、イメージカラーとして3色決めています。
ネイビー・オレンジ・ブラックの3色ですね。（白は除きます・・・）

表面には上部に大きくロゴ、上方部分として2カラム左右で区切ってます。
左側には名前と役職、右側には住所や電話番号。もちろん、ウェブサイトのURLも記載しています。

上方部分には背面をブラックにして普通の名刺とは違った印象を与えています。

というのも、印刷物って黒のベタ塗りは本来タブーなんですよ・・・ｗ
色の三原色シアン・マゼンダ・イエロー、それにキープレートを加えてCMYKというのが印刷物の基本のカラーになります。

このキープレートがブラックなんですが、印刷物の黒って完全に黒じゃなくちょっと茶色みががってるんです。
それをより綺麗な黒にするのがリッチブラックというものなんですが。

ちょっと手間なんですよね、印刷物のブラックは。DTP専攻の方はまずやらないです。。。
そこを逆に黒のベタ塗りを使って印象を強く残してます。

そして、下部にはネイビーと差し色のオレンジを使ったフッター。

何かと褒められる事が多くなりました

この名刺、もちろん表面を上にしてお渡しするのですが渡したときに、
「やっぱりデザイン会社だね」「カッコイイですね」
と仰っていただける事が多くなりました。

見栄えがするデザインの名刺をお渡しすることで、印象を強く残せるんですよね。
さらに、「あれ、あのデザイン会社の人だれだっけ？」と名刺帳を探す際にもすぐ見つけられるデザインです。

色々な面で特徴的な名刺にしておくと有利になったりします。

ちなみに、裏面はこんな感じです。

QRコードを置くことでウェブサイトへのアクセスをスムーズにします。
そして、大まかな業務内容を書いておくことで、より分かりやすく伝わりやすい印象を与えられます。

企業のキーワードを決めてそれを書いておくのも良いですね！
WEVOLUTIONだと「CREATIVE TO CONVEY　より見やすく、より分かりやすく」なのでそれを入れています。

オリジナル名刺は企業を伝えやすい

例えば、ロゴのカラーやウェブデザインと近づけることで統一感が出ます。
いわゆるトンマナ（トーン＆マナー）というものです。

トンマナを決めておけば、チラシ広告や看板広告にも使うことが出来ます。
ひと目見ただけで、「ああ、あそこの会社ね！」と理解してもらえます。

デザインひとつなんですが、これだけで結構変わります！

まとめ

という宣伝でした。
あまり今日書くことを思いつかなかったんでとりあえず少ないネタから膨らませて書いてみましたが・・・
ちゃんと思いついたネタをメモしとかなきゃダメですね；

とはいえ！
ちょっと名刺のデザインをおしゃれにかっこよくしてみたい！と少しでも思った方は！
ぜひWEVOLUTIONまでご連絡ください！！！

The post オリジナルの名刺を作って自社の印象を強く残そう！ first appeared on 苫小牧のホームページ制作ならWEVOLUTION.