# あいさつ しまやすのデザインGO!GO! この番組は、センスがなくてもできるデザインの講座を一日一つお送りしていきます。 本日のテーマは、デザインを作るときのツールの使い分けについてお話をしていきます。 それでは本日もよろしくお願いします。 # 本編 それでは 本日も聞いていただき ました ありがとうございます 今日は 私はウェブデザイン ずっとやってるんですけど ツール の使い分けをよくたまに確認される ので それについてお話をしていきます ウェブデザインを作りたいとか UI作っていきたいですよとかっていう 方に向けた放送となります 僕自身 は20年以上デザインの仕事 特に ウェブデザインと呼ばれるウェブ サイトのデザインを中心にやって います ツールもずっといろいろ 変遷あるんですけど 今もウェブ サービスというか 実際にとある サービスの開発を2年ぐらいかけて やってる結構大きな開発なんですけど それのデザインとかをメインで 担当したり 実際のUXとか全般を作って それを実際に落とし込んでいく みたいなことをやってます 僕が 使うツールはほぼに三つです ウェブ を作るときのメインのツールは Figmaを使ってます 全然どうでもいい ですけど FigmaかFigmaかって イントネーションって 僕 結構気になっちゃうんですけど 僕 ずっとFigmaって言ってたんですけど Geminiに聞いたら アクセントは冒頭 に付けるのが正しいですって言われたん で Figmaというふうに言おうと思います どうでもいいですね そんな感じで Figmaを使ってやってるんですね Figmaを使う理由としては Figmaは オートレイアウトっていうのがあるんですよね オートレイアウトって何かっていう と 例えば ヘッダーがあって メインビジュアル があって みたいなものがあって その順番が 例えば ヘッダーと メインビジュアルの 仮に余白を 10ピクセルとしますというふうに 決めたら その10ピクセルという ふうに固定でなるんですよね それ ぐらいだったら単調でいいんですけど 例えば ヘッダーがあって メインビジュアル があって 例えば お問い合わせ エリアがあって みたいな感じで バババッと並んでいくと 例えば ある要素とある要素を入れ替える っていうときに あらかじめオートレイアウト で10ピクセルを組んでおくと これと これ入れ替えますってなったときにも そこまでこの10ピクセルを意識 せずに ふいふいっと入れ替えられる っていうのが オートレイアウト のメリットです なんで 全般のレイアウト をある程度 ルールを決めておけば 後から何か調整するときに そこまで 考えずともできると 仮にこれが 10ピクセルオートレイアウトが使えない としたときには わざわざ10ピクセル を測る必要があるんですよね ここの 要素は10ピクセル空いています みたいなことを 自分で確認する 必要があるので それに比べると オートレイアウトっていうのは だいぶ楽なんですよね 全体作って おけばオッケーというところなので なんで 僕はそこそこ気に入って オートレイアウトを使えるっていう ところで 主にFigmaを使っています 他にもFigmaの場合 それこそちょっとした 画像加工とか いろんなことができる ので それは便利なんですよね なんで それでやってますという のが一番です ただし 例えば写真の 加工をするとか 写真マスクで何かしら 調整してとか 色味調整とかだったら 全然Figmaでもできるんですけど 細かい調整になると フォトショップ のほうが得られやすいんですよね なので フォトショップで作って それをFigmaに持っていくとか あとは ひられで何かしらアイテムを作って イラストで何か作ってみたいな ことをして Figmaで持っていくとか そこは組み合わせは結構あるんですけど 一つの母体として UIとかUVデザイン 作るときにはFigmaでやってます これ 昔々は僕 フォトショップで やってたんですけど なんでそれ 移行してきたかって 時代の変遷 はありますよね それこそ昔だったら Figmaの前だというと スケッチとか そういういろんなツールが出て きて 消えてみたいなのがあった スケッチも多分 消えてはいない と思うんですけど もうだいぶ衰退 しましたよね Figmaの完全に勝っちゃ ってる感じがしますけど そういう ふうにツールも変遷はあるんですけど その前は僕もフォトショップを ずっと使ってたんですね ウェブ 作るときに これ 今 フォトショップ で作る方って LPとかだといると思 うんですけど 減ってきてるなという 感じはするんですけど これ 何で かなっていうと おそらくですけど やっぱりレスポンシブデザイン っていう レスポンシブウェブデザイン っていう 横幅をスマホとかタブレット とかPCで全てのデザインをワン ソースで管理するみたいなもの が出来上がったときに 勝手が悪いん ですよね ちょっと可変性とか可用性 みたいなとこが フォトショップ の場合は結構ピクセルパーフェクト みたいな感じの昔の考え方でやる 場合はすごいいいんですけど 可用性 を持たせるっていうときにはちょっと 弱いので その辺りが多分 やっぱ フォトショップが勢いがなくなって きたのかなっていう原因なのかな というふうに思っています そんな 感じで 結構 このデザインをやって いくときに ツールっていうのは 割と変わっていったり 僕自身も 20年だって結構ツールは変わってます けど やっぱり今のFigmaの形っていう のは すごい三つの組み合わせが すごくいいんですよね 一時期 Figma をAdobeが買収するみたいな話が あったんですけど これなくなっちゃ ったんで 僕としては もしもこれ 買収が進んでたら ライセンスとか 結構お金払うとこ一箇所になって 楽だなとか もしかしたら安くな ったりするのかなとか思ったんですよ そこはちょっとぼしゃっちゃった ので 残念ではあるんですけど とりあえず 現時点では三つのツール を使ってます ここからちょっと またAIとかいろいろ入ってくる と分からないですけど 現時点では FigmaとIllaretとフォトショップ というところをメインで使ってる というのがあります やっぱりこんだけ いろんなツールが出てきてるんだ けれども やっぱりAdobeのこのIllaret フォトショップの地位っていう の 今のところは強いですよね 多分 いろんなツール 今AppleがAdobe系の デザインのグラフィックツール を潰しにかかってるみたいな話 ありましたけど 価格でいったら 確かにAppleとかって 今は安かったり とか 便利なものがいっぱいある のでいいんですけど やっぱり このチームで同じツールを使う とか あとは印刷上みたいなところ を考えると なかなかすぐにポン と入れ替わることはないと思うん ですけど ここはどうなるか分かんない んで 楽しみだなと思いつつ その 後で来たりしながら とりあえず ウェブデザインに関しては三つの ツール FigmaとIllaretとフォトショップ を使ってますよというお話を 今日はしてみました # デザイナー超覚醒コミュニティ「しまらぼ」 お知らせです。本気でプロのデザイナーを目指すなら、シマラボがおすすめです。 もとやふうデザイン責任者のシマヤスが、実践とレビュー、対話を通じて伴奏するデザインのコミュニティになっています。 20日度デザインのレビュー会、実案件の相談も可能です。 また、デザイナー仲間とのつながりで、独学の不安を突破できます。 ベーシック会員は月に980円で、プロフェッショナル会員が月々3000円となります。 初心者でも歓迎しておりますので、AI自体を一人で悩まず、みんなで前進するというところで、ぜひご参加ください。 チャプターのリンクから内容詳細チェックできますので、ぜひご覧ください。 # デザインの解剖図鑑が絶賛発売中！！ お知らせをさせてください。私の初めての著書、デザインの解剖図鑑が絶賛発売中です。 全編図解でデザインのティップスやマインドをまとめた一冊丸々図解の書籍となります。 初心者デザイナーの方はもちろん、SNSで図解を作ったり、お仕事で資料を作るようなデザイナー以外の方にもとてもおすすめの書籍となります。 このチャプターにAmazonのリンクをつけておきますので、興味のある方はぜひチェックしてみてください。 # デザイナー初心者向けに無料特典を配布しています！！ デザイナーって場所にとらわれずに ノマドで働けるので始める人が とても多いんですけど やることが たくさんあって デザインという 一つの言葉だけでも抽象度が高い ので 例えばウェブデザインとか 紙のデザインとかロゴのデザイン とか いろいろあって それを学ぼう とすると 何から学んでいいか 分からないとか じゃあ実際作って みても これって私はプロとして やっていけるレベルなんだろう かとか これぐらいスキルを身に つけたら 例えば案件受注していいん ですかね みたいなところもなかなか 分かりづらいんですよね 算数 とかだったら1たす1は2みたいな 正解があるんですけど デザイン って正解がないので 何かしらこの 最初のうちというのは 本気でやる 人であればあるほど そういった アドバイスをくれる人っていう のが結構いたほうが絶対に有利で スピード感を持って収益化ができる ようになると思います そんな方に 僕自身がいろいろアドバイスを したりとか あとは動画でそうい ったコツみたいなものをお伝え しています なんで もし良ければ このチャプターに公式ラインの リンクがついてますので ぜひ得点 もつけてますので ご確認ください # おまけ それではおまけの放送を収録していきます。 今日は祝日ですよね。最近は祝日なんですけど、Voicyをたくさん放送した方がテンポがつかめるのではというところで、ちょっと実験中です。 そんな感じで、そうだな。 コメントが来てるのかな。 コメント、コメント、コメントですね。 はい、ありがとうございます。 キーボードのいらない世界という、音声入力最高だというテーマの放送会に2件のコメントをいただいております。 まずしげるさんですね。しまゆさんの皆さん、リスナーの皆さん、こんにちは。 こんばんはか。 今日の放送を聞いて、体の不良な方とかにも重宝されそうな気がしました。 最新のインターフェースの話を聞いていると、トム・クルーズ主演のマイノリティリポートのオープニングのような世界が早く来ないかなど、ワクワクをしています。 逆にマトリックスのように、電脳まで行くと味気ないんですよね。 ありがとうございます。電脳ね。 マトリックスはあの時代からすると、すごい特殊な表現というか、ちょっと削るような形で、弾を通り過ぎるみたいな、スローモーションみたいなところとか、 クルッと回る、一つの被写体を囲って回るみたいな、独自の映像の手法みたいなのがあって面白かったですよね。 マトリックス以前か後で、結構暴力というか、そういう映画、ドラマが変わったなって感じがしますよね。 しげるさん、コメントいただきましてありがとうございます。 2件目、ボイシーパーソナリティでキャッシュロスの発信をされているりゅういちさんですね。 音声技力いいですね。調べてやってみよう。ありがとうございます。 まさにね、本当に音声技力は今後、さらに広がると思うんですが、 本当にブツブツと声を出したりとか、ファシリというか、コンピューターのAIと対応しながら作っていくっていうのは本当にそういう感じになるんだろうなと思いますね。 そんな感じで、りゅういちさんもコメントいただきましてありがとうございました。 こんな形でですね、いただいたコメントにはコメント返しをしていきます。 今日の放送、いいねと思ったらグッドボタン、チャンネル登録なんかもよろしくお願いいたします。 それではですね、本日もここまで聞いていただきましてありがとうございました。また明日。