【実践】Webデザイン良く使う3パターン！制作の流れ。Adobe XDを使用して作ります。

[@くろくろ-y9q]

真ん中のデザイン、文字部分を作成するときに、 文字の左右幅に合わせて、フォントサイズを変えてた！ テクニックすごい！！

[@hirocode]

ありがとうございます🙇‍♂️❗️

[@齊藤史朗-c8q]

３パターン作る際の発想参考になる！！

[@hirocode]

参考にしていただけて嬉しいです😊♪ありがとうございます🙇‍♂️❗️

[@齊藤史朗-c8q]

@@hirocode こちらこそ！今後も動画から学ばせてもらいます！😄

[@sikiyuu]

すでに十分使えそうなデザインに見えるのですが笑　参考になります！

[@hirocode]

コメントありがとうございます😆❗️ そう言っていただけて嬉しいです😊🎵ポートフォリオサイトなどには使えるかもですね💡

[@vencer3457]

めちゃくちゃ勉強になる。。 ありがとうございます

[@hirocode]

嬉しいコメントありがとうございます😭❗️

[@genbo5242]

かっこいいデザインがサクサク作れますね。才能と経験を感じます。あとフォントが多いと読み込みがながくなるんですね。知りませんでした😲

[@hirocode]

嬉しいコメントありがとうございます🙇‍♂️❗️ 特に日本語のフォントは文字数が多くて重い傾向があるので、フォント周りは気にすることが多いです。特定の箇所だけであれば、画像で書き出すか、サブセット化といって必要な文字だけのフォントファイルを作成して読み込むといった方法もあります。ただ、どちらも保守性にはかけてしまいますね💦

[@ヒロ-m9m]

デザイン、凄く勉強になります😊 デザインを作成する際、イラストレーターはあまり使いませんか？

[@hirocode]

嬉しいコメントいただきありがとうございます🙇‍♂️❗️ figmaやXDである程度できてしまうので、イラストレーター使う頻度はかなり低くなったように感じます😲 クライアントに共有する前提の制作物か、シェイプをガッツリ触るような制作ではイラストレーター使う感じです❗️❗️❗️

[@AK-cg7vn]

冒頭で仰っていた「ヘッダーの高さを固定することが多い、人によってはpaddingとかで調整することもある」とのことですが、これに関しては好みの問題という感じですか？

[@smami5740]

動画、ありがとうございます！ ヒロさんは、ネガティブマージンの扱いが得意で羨ましいです。padding, marginの調整時やcalc関数の代用と絡めたネガティヴマージン解説動画を、一本Upしていただけるとありがたいです。

[@hirocode]

動画のご要望いただきありがとうございます😊♪ レイアウト含めたそのような動画をアップ検討リストに入れさせていただきます😆❗️

[@smami5740]

@@hirocode ありがとうございます❣️検討のほど、よろしくお願いします😃

[@上西佳奈子]

こんにちわ。xdを使用したデザイン案とても参考になりました！私は紙のデザインをする事が多いのですが、アートボードサイズについて教えてください。紙だとサイズが明確なのですが（A4とかB4とか）webデザインを作成する際のアートボードのサイズに悩みます。 ヒロコードさんが、1366✖︎840で作成した理由を教えてください。

[@hirocode]

こんにちは😊♪ご視聴いただきありがとうございます🙇‍♂️ xdのweb用テンプレートで用意されている幅が1280px,1366px,1920pxの3種類で、それぞれ一般的なモニターの画面幅になっていて、どのサイズを使うかは個人や会社のルールなどによって様々あるかと思います。 僕の場合は一般的なwebサイトを作成する場合、コンテナの幅を1000pxくらいにすることが多く、1280pxだと左右の横幅が窮屈なイメージで、逆に1920pxだと広すぎるので、1366pxを使用しています。 高さに関して、デフォルトでは横幅1366pxに対して高さ768pxになっていますが、自分の作業モニターでプレビューする際に、840pxくらいが画面いっぱいに広がる大きさなので、そこだけ調整しています😆❗️

[@上西佳奈子]

@@hirocode 　なるほど！とても参考になりました。私もまずは1366で作成してみます。ありがとうございます。

[@rogw6043]

控えめ言って神動画だし神チャンネルだと思います。 デザイン提案の時、お客さんが自分でも少しいじれるかなと思ってパワポ使ってる自分がダサく感じますw

[@hirocode]

そういっていただけてめちゃめちゃ嬉しいです😭❗️ありがとうございます🙇‍♂️ パワポ使ってるんですね😆❗️ デザイン関係ないですけど、プレゼンの時パワポだとメモとれる機能は優秀ですよね💡XDにも欲しいです♪

[@トニー-c8j]

Twitterでリクエストした者です！ めちゃくちゃ楽しみにしてました！ 質問なのですが、11:09の部分のように、後で追加する写真を、元から決めた写真の枠にはめる方法が知りたいです！

[@hirocode]

リクエストありがとうございました😆❗️❗️コメントもありがとうございます☺️♫ 質問箇所について あらかじめ作った四角に写真をドラッグ&ドロップすると、いい感じにはまってくれます❗️ 更に、ダブルクリックすると、はめ込んだ画像の縮尺や配置などを編集することができます🙆‍♂️

[@tirimen3505]

こういったデザインを実際のwebsiteに落とすのってどうやってやるんですか？

[@hirocode]

コメントいただきありがとうございます😊♪ 流れとしては、デザインデータから素材を書き出したり数値を見ながらコードしていきます💡 ざっくりとした流れの動画上げてるので、興味あれば見てみてください🙇‍♂️ kzbin.info/www/bejne/oKmsoYyFhM1girc

[@user-wd8rk5te5z]

よく知らないんですけどフリーランスエンジニアとかってデザインも基本的にやってるんですか？ 聞いた話では案件にデザインの見本？みたいなのがあるからそれにそってプログラミングしていくって言ってたんですけど、案件によってデザインしたりしなかったりみたいな…？

[@hirocode]

エンジニアがデザインをするっていうのはあまり聞かないですが、デザイナーがコーディングまでするというのは少なくないと思います🙆‍♂️❗️ フリーランスの方で、パッケージのようなものを用意して、ロゴや写真、テキストを変更するライトなプランを用意するとかはありそうですね❗️

[@tirimen3505]

最後の方に行っていた写真を見えやすくする編集や微調整をどのように行っているのか、詳しく知りたいです！

[@kkrinmr9905]

WEB制作には、フォトショップなど有料ソフトが必須でしょうか？真似しながら勉強をしたいのですが、ソフトの値段が高くて踏み込めません。無料でおすすめがあれば教えて欲しいです。

[@hirocode]

コメントありがとうございます❗️Webデザインのメインで使用するソフトはAdobe XDを使用していますが、基本的なものはXDのみでも十分作成可能です🙆‍♂️ サイトに載せる写真のレタッチする際にPhotoshopを使用したり、ロゴやバナーなどを作成・編集するにはIllustratorがあると便利です💡 XDは無料版でも基本的な機能は使えるみたいなので、まずはそちらで試してみてはいかがでしょうか😆❗️

[@khanhvu6239]

Character In the video It's great, I like it a lot $$

[@hirocode]

Thank you so much 😆❗️

[@かさまー-p5t]

こんばんは。初めて動画を拝見しました。xdソフトを使ったことがなかつたのですが、デザインカンプ作成に使ってみたいと思いました！ こちら無料でダウンロードできるのでしょうか？ またスマホでもHTML、CSSを記入できるアプリなどあるか知りませんでしょうか？ PCを持ち歩いてない時に携帯で練習したく、、、 オススメあれば教えて下さい(>_

[@hirocode]

コメントありがとうございます😊❗️ XDについては無料版があるので、いくつか機能制限はあるみたいですが、基本的なデザインは問題なく出来るようです😆❗️是非試してみてください🎵 僕のKZbinのネタ帳にスマホでコーディングできるか？ってのがあって、同じようなコメントいただけてびっくりしました😆笑❗️こちら更新お待ちください🙇‍♂️🙇‍♂️🙇‍♂️

[@かさまー-p5t]

そうなのですね！動画楽しみにしています！