HOME Design これだけはおさえておきたい!Webデザイナー 使用ツールのご紹介

これだけはおさえておきたい!Webデザイナー 使用ツールのご紹介

著者アイコン
Naho Aizawa

OGP_webdesigner-tool

こんにちは!&donuts デザインチームの相澤です。

&donutsの面接時にご質問を受けることもあり、弊社のWebデザイナーが使用している基本的なツールのご紹介をします。ご応募をご検討頂いている方やWebデザイナーを目指している方にとって、ご参考になる事を願ってお届けいたします。

デザイン編

webdesigner-tool_01

・グラフィックツール

プロジェクトで指定のツールがある場合はそれを使いますが、指定がない場合は、ワイヤー・デザインと「Adobe XD」を使う事が多いです。「Adobe XD」は、URLでのオンライン共有できるので、ワイヤー・デザインのレビュー時に関係者同士でコメントの記述をしています。開発用の共有すれば、使用している色やテキスト、余白などの数値を取得できたり、CSSコードも表示されるので、引用してコーディング時にも使用しています。

「Photoshop」は写真加工、「Illustrator」はイラスト・地図・グラフ・ロゴなどの作成、また両者ともバナー・メインビジュアルのクリエティブ作成で使うことが多く、本来のツールの特性を生かした使用が多いです。

・おまけ:非デザイナーの方にオススメのツール

社内のデザイナー以外のご担当者が、グラフィックツールがパソコンに入ってないけれど、記事やSNSに載せる画像、資料に載せたい画像など、手軽にデザインした画像を作りたいというシーンは結構あるのでは?と思います。社内でそういう相談を受け、見つけた「Canva」。無料からはじめられ、すべての人がデザインを自由に作成できるツールです。導入や操作が手軽で、楽しくデザイン作成ができます。デザインテンプレートが豊富なので、デザインの参考にもなります。

コーディング編

webdesigner-tool_02

・エディタ

指定はないですが、「Visual Studio Code」を使っていますMicrosoftが提供しているオープンソースのエディタで、動作がとても軽量です。デフォルトでも機能が充実していますが、拡張機能で更に便利にすることができます。

とても便利!と思った拡張機能が、「Live Sass Compiler」です。拡張機能をインストールし少し設定をするだけで、Sassを書ける環境が手軽にできます。ベンダープレフィックスも自動でつけてくれます。Sassを書ける環境がすぐに欲しい、勉強したいけど環境構築が壁になっている、、、などの場合にとても便利だと思います。

・ファイルのバージョン管理

GitHub」を使っています。Gitの操作は、ターミナルでコマンドを打つのも勿論OKですが、「SourceTree」を使っています。SourceTreeは、無料のGitクライアントソフトで視覚的にGitの操作が行えます。

「GitHub」「SourceTree」を使い始めたころは、誤った操作でおかしなことにならないかドキドキしていましたが(笑)、使っていく毎に慣れてきますし、なんて便利なんだ.....と開発者の方への尊敬の念でいっぱいです。

・CMS

プロジェクトにもよりますが、自社開発のCMS・EC統合プロダクト「Open Media Suite(OMS)」で組み込みをしています。組み込みをするときは、エンジニアとやり取りをしながら進めています。当OMOSAN Blogも、OMSを使用しています。

OMSの開発ストーリーの記事もぜひお読みください!

************************

いかがでしたでしょうか?ここに書いているは、制作の中での基本的なツールです。こんなのを見つけたよ!これを使ってみて便利だったよ!などの情報は、毎週行っているデザイン室での定例ミーティングで共有しあっています。そこから得る知識も自分が共有するのも楽しみの一つです。

今回はツールだけのご紹介ですが、Webデザイナーとして求められている事は幅広く、習得しておきたいツールもスキルも沢山あります。どれもこれも完璧に身につける事は難しいですが、臨機応変に楽しく学習してみる、幅広く知識持っていることが大事だと思っています。その中から自分が好きと思える・得意とするものを見つけ、「これだけは誰にも負けない!任せて!」と自信を持てるものがあるのが理想です。

現在お勉強中の方、また弊社にご応募をご検討の方、楽しくこれからも学んでいきましょう!

Innovator Japan 求人情報

&donuts 求人情報

関連記事