【実践】Webデザイン良く使う3パターン！制作の流れ。Adobe XDを使用して作ります。
今回は、Webデザイン案を作る際に、良く作る3パターンのトップイメージを紹介します❗️
中身はサイトに合わせて変更する必要がありますが、ベース作りのパターンとして捉えてもらえればと思います。
不明点等あればお気軽にコメント下さい😆❗️
この動画が気に入っていただけたら、ぜひチャンネル登録よろしくお願いします😆❗️
その他のSNSもフォローいただけたら嬉しいです🙇♂️❗️
◆ チャンネル登録
kzread.info?sub_c...
◆ Twitter. ツイッター
/ hirocodeweb
◆ Instagram. インスタグラム
/ hirocodeweb
◆ ROOM. 楽天ルーム
room.rakuten.co.jp/hirocode/
🔋 僕が使っている、おすすめのデバイス 🔋（アフィリエイト広告を使ってます！）
---- マウス ----
【 ロジクール アドバンスド ワイヤレスマウス MX Master 3 】
amzn.to/34Zn5LH
" ボタンカスタマイズによって作業の効率化が図れます。アプリケーションごとにカスタマイズ可能です。 "
---- キーボード ----
【 ロジクール アドバンスド ワイヤレスキーボード KX800 MX KEYS 】
amzn.to/38S1B4i
" 打ちやすく疲れにくく、タイピング音も静か。長時間コーディングする方にオススメ。 "
---- パソコン ----
【 Apple Macbook Pro 16inch 】
amzn.to/2WXKtEN
" 画面サイズ大きいと作業が捗るので便利です。初期投資で良いパソコンの使用をオススメします。 "
---- 周辺機器 ----
【 Apple AirPods Pro 】
amzn.to/3rAyU4u
" カフェでの作業や通勤時間など、ノイズキャンセリング機能で周りの雑音に影響されることなく集中できるようになります。他にApple機器を使用している方はAirPodsがオススメです。
【 Apple iPad Pro 11インチ 】
amzn.to/3mZuvoo
" macに搭載されているSidecarという機能で、iPadをサブディスプレイとしての利用が可能です。 "
📕 おすすめ書籍 📕
---- デザイン 基礎編 ----
【 1冊ですべて身につくHTML ＆ CSSとWebデザイン入門講座 】
amzn.to/3o8vofO
" webデザインの基礎とコーディング(HTML/CSS)の基礎がわかる。入門者におすすめの一冊です。 "
【 なるほどデザイン 】
amzn.to/2X48Z77
" デザイン全般について、図解で視覚的に分かりやすく説明がされている書籍。デザインに興味がある人にオススメです。 "
---- デザイン 思考編 ----
【 誰のためのデザイン？ 】
amzn.to/3o4gzun
" デザインにおける役割を理解できる。デザインをする上で何を考える必要があるのかが分かる本。 "
【 IAシンキング Web制作者・担当者のためのIA思考術 】
amzn.to/2KETvEn
" デザイン以前のサイト設計における思考の方法を身につけるための一冊。 "
---- 書籍デバイス ----
【 キンドルペーパーホワイト Kindle Paperwhite 】
amzn.to/3n2AwRh
" 200冊あったビジネス書を処分してこちらを導入。一部デジタル化されていない書籍はありますが、紙の本に特別なこだわりのない方は電子書籍での読書をオススメします。
🎧 BGM 🎧
----------------------------------------------------------
Music Title: Happy And Joyful Children
Music Link: • Happy Children Backgro...
----------------------------------------------------------
Пікірлер: 36
真ん中のデザイン、文字部分を作成するときに、 文字の左右幅に合わせて、フォントサイズを変えてた！ テクニックすごい！！
@hirocode
3 жыл бұрын
ありがとうございます🙇♂️❗️
めちゃくちゃ勉強になる。。 ありがとうございます
@hirocode
3 жыл бұрын
嬉しいコメントありがとうございます😭❗️
すでに十分使えそうなデザインに見えるのですが笑 参考になります！
@hirocode
3 жыл бұрын
コメントありがとうございます😆❗️ そう言っていただけて嬉しいです😊🎵ポートフォリオサイトなどには使えるかもですね💡
かっこいいデザインがサクサク作れますね。才能と経験を感じます。あとフォントが多いと読み込みがながくなるんですね。知りませんでした😲
@hirocode
3 жыл бұрын
嬉しいコメントありがとうございます🙇♂️❗️ 特に日本語のフォントは文字数が多くて重い傾向があるので、フォント周りは気にすることが多いです。特定の箇所だけであれば、画像で書き出すか、サブセット化といって必要な文字だけのフォントファイルを作成して読み込むといった方法もあります。ただ、どちらも保守性にはかけてしまいますね💦
Twitterでリクエストした者です！ めちゃくちゃ楽しみにしてました！ 質問なのですが、11:09の部分のように、後で追加する写真を、元から決めた写真の枠にはめる方法が知りたいです！
@hirocode
3 жыл бұрын
リクエストありがとうございました😆❗️❗️コメントもありがとうございます☺️♫ 質問箇所について あらかじめ作った四角に写真をドラッグ&ドロップすると、いい感じにはまってくれます❗️ 更に、ダブルクリックすると、はめ込んだ画像の縮尺や配置などを編集することができます🙆♂️
３パターン作る際の発想参考になる！！
@hirocode
3 жыл бұрын
参考にしていただけて嬉しいです😊♪ありがとうございます🙇♂️❗️
@user-pl4fq8pq3t
3 жыл бұрын
@@hirocode こちらこそ！今後も動画から学ばせてもらいます！😄
最後の方に行っていた写真を見えやすくする編集や微調整をどのように行っているのか、詳しく知りたいです！
冒頭で仰っていた「ヘッダーの高さを固定することが多い、人によってはpaddingとかで調整することもある」とのことですが、これに関しては好みの問題という感じですか？
動画、ありがとうございます！ ヒロさんは、ネガティブマージンの扱いが得意で羨ましいです。padding, marginの調整時やcalc関数の代用と絡めたネガティヴマージン解説動画を、一本Upしていただけるとありがたいです。
@hirocode
2 жыл бұрын
動画のご要望いただきありがとうございます😊♪ レイアウト含めたそのような動画をアップ検討リストに入れさせていただきます😆❗️
@smami5740
2 жыл бұрын
@@hirocode ありがとうございます❣️検討のほど、よろしくお願いします😃
よく知らないんですけどフリーランスエンジニアとかってデザインも基本的にやってるんですか？ 聞いた話では案件にデザインの見本？みたいなのがあるからそれにそってプログラミングしていくって言ってたんですけど、案件によってデザインしたりしなかったりみたいな…？
@hirocode
3 жыл бұрын
エンジニアがデザインをするっていうのはあまり聞かないですが、デザイナーがコーディングまでするというのは少なくないと思います🙆♂️❗️ フリーランスの方で、パッケージのようなものを用意して、ロゴや写真、テキストを変更するライトなプランを用意するとかはありそうですね❗️
こんにちわ。xdを使用したデザイン案とても参考になりました！私は紙のデザインをする事が多いのですが、アートボードサイズについて教えてください。紙だとサイズが明確なのですが（A4とかB4とか）webデザインを作成する際のアートボードのサイズに悩みます。 ヒロコードさんが、1366✖︎840で作成した理由を教えてください。
@hirocode
3 жыл бұрын
こんにちは😊♪ご視聴いただきありがとうございます🙇♂️ xdのweb用テンプレートで用意されている幅が1280px,1366px,1920pxの3種類で、それぞれ一般的なモニターの画面幅になっていて、どのサイズを使うかは個人や会社のルールなどによって様々あるかと思います。 僕の場合は一般的なwebサイトを作成する場合、コンテナの幅を1000pxくらいにすることが多く、1280pxだと左右の横幅が窮屈なイメージで、逆に1920pxだと広すぎるので、1366pxを使用しています。 高さに関して、デフォルトでは横幅1366pxに対して高さ768pxになっていますが、自分の作業モニターでプレビューする際に、840pxくらいが画面いっぱいに広がる大きさなので、そこだけ調整しています😆❗️
@user-zh2mr4iy1x
3 жыл бұрын
@@hirocode なるほど！とても参考になりました。私もまずは1366で作成してみます。ありがとうございます。
WEB制作には、フォトショップなど有料ソフトが必須でしょうか？真似しながら勉強をしたいのですが、ソフトの値段が高くて踏み込めません。無料でおすすめがあれば教えて欲しいです。
@hirocode
3 жыл бұрын
コメントありがとうございます❗️Webデザインのメインで使用するソフトはAdobe XDを使用していますが、基本的なものはXDのみでも十分作成可能です🙆♂️ サイトに載せる写真のレタッチする際にPhotoshopを使用したり、ロゴやバナーなどを作成・編集するにはIllustratorがあると便利です💡 XDは無料版でも基本的な機能は使えるみたいなので、まずはそちらで試してみてはいかがでしょうか😆❗️
デザイン、凄く勉強になります😊 デザインを作成する際、イラストレーターはあまり使いませんか？
@hirocode
Жыл бұрын
嬉しいコメントいただきありがとうございます🙇♂️❗️ figmaやXDである程度できてしまうので、イラストレーター使う頻度はかなり低くなったように感じます😲 クライアントに共有する前提の制作物か、シェイプをガッツリ触るような制作ではイラストレーター使う感じです❗️❗️❗️
Character In the video It's great, I like it a lot $$
@hirocode
2 жыл бұрын
Thank you so much 😆❗️
控えめ言って神動画だし神チャンネルだと思います。 デザイン提案の時、お客さんが自分でも少しいじれるかなと思ってパワポ使ってる自分がダサく感じますw
@hirocode
3 жыл бұрын
そういっていただけてめちゃめちゃ嬉しいです😭❗️ありがとうございます🙇♂️ パワポ使ってるんですね😆❗️ デザイン関係ないですけど、プレゼンの時パワポだとメモとれる機能は優秀ですよね💡XDにも欲しいです♪
こういったデザインを実際のwebsiteに落とすのってどうやってやるんですか？
@hirocode
2 жыл бұрын
コメントいただきありがとうございます😊♪ 流れとしては、デザインデータから素材を書き出したり数値を見ながらコードしていきます💡 ざっくりとした流れの動画上げてるので、興味あれば見てみてください🙇♂️ kzread.info/dash/bejne/nKx90ruIf8uThLg.html
こんばんは。初めて動画を拝見しました。xdソフトを使ったことがなかつたのですが、デザインカンプ作成に使ってみたいと思いました！ こちら無料でダウンロードできるのでしょうか？ またスマホでもHTML、CSSを記入できるアプリなどあるか知りませんでしょうか？ PCを持ち歩いてない時に携帯で練習したく、、、 オススメあれば教えて下さい(>_
@hirocode
3 жыл бұрын
コメントありがとうございます😊❗️ XDについては無料版があるので、いくつか機能制限はあるみたいですが、基本的なデザインは問題なく出来るようです😆❗️是非試してみてください🎵 僕のKZreadのネタ帳にスマホでコーディングできるか？ってのがあって、同じようなコメントいただけてびっくりしました😆笑❗️こちら更新お待ちください🙇♂️🙇♂️🙇♂️
@user-tu1zj9db5p
3 жыл бұрын
そうなのですね！動画楽しみにしています！