ajsaiポートフォリオサイトに使った技術紹介 #4

Tech デザイン
大名の路地

前回はHTML/CSSについて紹介しました。

今回はデザインについて。
デザイン制作はスーパー信頼しているデザイナーさんである

THINKA studioはやし こうへいさんにお願いしました。
AdobeXD ユーザーグループ 福岡の代表をしていると共に、Webデザインの講師もしています。

もともと同じ職場で働いていた縁もあり、ロゴデザインとWebサイトのデザインをお願いしました。

Webデザインには、Adobe XD

はやしさんがデザインということで、デザインツールはもちろんXDでした。
軽量で、動作も早くて最高ですね!

簡単なワイヤーやデザイン共有はプレビュー機能を使い、追加のデザインはアートボードが1つ増えるだけでとてもわかりやすく、コーディングしやすかったです。

XDってこんな使い方があるんだなぁと思いながら、お客様の立場になって楽しみました。

Adobe XDのコーディングってどうなの?

最近はもうあまり聞きませんが、コーディングとの相性的な問題ですね。

結局はデザイナーさんとコーダーさんがツールをどれだけ理解しているかによると思いますが、今回はスーパーコーディングがしやすかったです。

アセットに全てのカラー・文字スタイル・コンポーネントが登録されていたので、そちらを基準にパパッとコーディングができました。

下手にPhotoshopを使うと描画モードが変わったものになっていたり、画像が非破壊編集になっていなかったりがXDでは初心者でも起こらないでのオススメかなと思います。

Illustrator

ロゴデザインはイラストレーターを使っていました。
英語・日本語、自分の運営するYouTubeチャンネルにも使えるように3パターン作っていただきました。(優しい)

あじさいの新しいロゴ

ロゴデザインの制作話は別の記事にまとめますが、ロゴデザインの説明された時の納得感はとてもありすごく気に入っています。

最後に

Webデザイン・ロゴデザインを作ってもらった際のお話はまた別にまとめようと思っています。

最近デザインデータはほとんどAdobe XDかSketchが多いなって印象です。
素材の加工だったりは、PhotoshopやIllustratorを使うことが必ずあるので、一通りデザインツールは使えるようになったほうがいいですね。