ノーコードツールSTUDIOでデザイナー以上のHPを作る方法【初心者が7日で】
ฝัง
- เผยแพร่เมื่อ 4 ส.ค. 2024
- 【完全無料】LINE登録で毎日届く30個の特典をプレゼント！
無料LINE登録はこちらから
utage-system.com/line/open/oH...
✅駆け出し1年目から年商４桁万円を実現するフリーランスデザイナーの心得
✅実際に販売したサイトマップ実例集（10業界分）
✅受注金額別サイト実例
✅初心者フリーランスが30日で収益発生可能な営業攻略ノウハウ３ポイント
✅初稿提案が一番大事！心を掴んで、信頼を得る資料作りノウハウ
✅そのまま渡すだけ！STUDIOウェブ制作で、お客様にやってもらうことマニュアル
✅稼ぐデザイナーは知っている印象と言葉の相関集
✅売上にダイレクトに直結！細かい作業の金額サンプル表
✅実際に使っているスケジュールテンプレート
✅フリーランスデザイナーが読むべき本の要約資料10選
【初心者が一週間で！】ノーコードツールSTUDIOでデザイナー以上のHPを作る方法
00:00 デザイナー以上のホームページを作る方法
01:03 デザインとプログラミングの学習に関する誤解
02:09 デザイン学校の講師としての経験から学んだこと
03:14 ノーコードツール「スタジオ」を利用するメリット
04:18 客からOKが出るデザインの重要性
05:22 色の選び方と配色理論
06:27 企業ロゴとの色の一致性
07:32 フォントの選び方とデザインへの影響
08:37 文字間と行間の調整方法
09:41 近接と列を使用したデザイン原則
10:47 反復を使ったデザインの一貫性
11:53 コントラストを使った強弱の明確化
14:03 ノーコードツールSTUDIOの紹介とデザインの実践
15:07 プロジェクトの開始と基本的なレイアウトの作成
16:15 ロゴとメニューバーのデザイン
17:24 メインビジュアルとキャッチコピーの配置
18:29 メニューバーの配置と調整
19:35 メニューバーのマージン調整
20:41 メインビジュアル画像の挿入と調整
21:48 メインビジュアルのテキストボックス配置
22:57 シンボリックな線のデザインと配置
24:09 テキストのフォント選択と配置
25:27 テキストのサイズ調整と行間調整
26:32 文字間と行間の最終調整
27:40 "アバウト"セクションの作成開始
28:56 "アバウト"セクションのテキストと線の配置
30:26 "アバウト"セクションの詳細テキスト配置
31:32 "アバウト"セクションの画像挿入とサイズ調整
32:41 サービスセクションの詳細設定
33:47 「アバウト」セクションにボタンを追加
34:56 サービスセクションの微調整
36:06 サービス項目の配置
37:13 サービス項目の横幅調整とコントラスト強化
38:20 背景の追加とレイヤー調整
39:26 レイヤー調整とデザインの最適化
40:36 サービス項目の画像とテキストの配置
41:40 レイヤーの調整と最適化
42:55 サービス項目の行間調整
44:01 サービス項目の配置調整
45:08 デザインのプレビューと最終調整
46:16 画像変更と最終調整
47:25 プライスセクションの作成
48:41 プライスセクションの詳細
49:45 プライスセクションにボタンを追加
51:07 アクセスセクションの作成
52:13 アクセス情報の配置
53:24 コンタクトセクションの画像挿入
54:30 コンタクトセクションのテキスト配置
55:37 フッターの作成と配置
56:49 デザイン原則の適用とレビュー
57:52 ページのコントラストと整列
58:59 コンタクトセクションの強調とフッターの調整
1:00:04 デザインの原則とその応用
初心者でも1週間でデザイナー並み、あるいはそれ以上のホームページを作成できる方法を提供する。
デザインセンスやプログラミングの知識は必要なく、ノーコードツール「STUDIO」の使用方法を学ぶだけで良い。
多くの人がデザインに関して持つ疑問や不安を解消し、無駄な努力を避けながら効率的に学習する方法を指南する。
自信を持ってデザインを行えるようになり、プロとしてのスキルを身につけることができる。
デザインには「正解」が存在し、客からのOKを得ることが最終目標である。
副業Web制作で月10万円を稼ぐ具体的な5ステップ！【お金を稼ぐ方法】
• 副業Web制作で月10万円を稼ぐ具体的な5ス...
【知らないと損】ノーコードWEB制作で月30万円稼ぐ5ステップロードマップ
• 【知らないと損】ノーコードWEB制作で月...
第2回｜STUDIO・完全ノーコードでここまでできる！本格的なコーポレートサイトをゼロから一緒に作ってみよう｜2023年8月仕様アップデート対応
• 第2回｜STUDIO・完全ノーコードでここま...
#ノーコード
#web制作
-----------------------------------
運営会社
株式会社ゴーゴーゴー
ddd-school.jp/
当社サービスのご利用には必ずコチラにご承諾ください。
ddd-school.jp/Law
初めて動画拝見させていただきました！凄く参考になります！！これからの動画も楽しみにしてます☺️🌸
続き待ってました！！！
ありがとうございますっ！
また感想やご質問など何でもお気軽に！
とても勉強になりました！早速自分でもやってみます！ありがとうございました☺次はリンクのページの作り方を教えて下さい🙇
ご視聴ありがとうございます！
リンクのページですね！今後、詳しい使い方も公開予定ですので、ぜひチャンネル登録していただきお待ちいただけますと幸いです^_^
とても参考になります！ありがとうございます！
デザインするところまでは理解出来たのですが、クリックした先のページに移動するやり方は今後動画配信されますか？
ご視聴、ご質問ありがとうございます！
ページ移動に関しても、今後配信する予定です！それまで、この動画で紹介した以外にも色んなレイアウトや、色んなテイストのデザインを作ってご自身のデザインの幅を作る練習をぜひしていただければと思いますのでよろしくお願いいたします^_^
Studio初心者です。とても丁寧な動画で参考になります！
Studioのテンプレートでサイトタイトルがテキストになっているのですが、そこにロゴ画像をはめ込むことは可能でしょうか。
色々とさわってるのですが、うまくいかなくて苦戦しております💦
お手すきの際にご教授頂けると助かります🙇💦
ご視聴ありがとうございます！
画像をSTUDIOにドラッグ&ドロップでアップロードしていただき、画像を配置し、任意の場所に移動していただければ可能です！
@@user-qk8bi7us1j @user-qk8bi7us1j お返事ありがとうございます！実はあのあと自分で触っているうちに解決できました。
そして、おかげさまで実働半日程度でサイトが立ち上がりました！
こんにちは。とてもわかりやすい解説ありがとうございます。一つご質問です。STUDIOの中にコードを書かなければならない部分があると聞きました。その部分もTH-camなどで勉強しながら一人で完成させることは可能ですか?
ご視聴ありがとうございます！
必要な機能次第ではコードを書く必要はありますが、コードは書かなくても基本的には完成までもっていけます！
コードが必要な際は、ググれば記事などたくさんでてきますので、そちらを参考にしていただければお一人でも可能です。
以前、studio 触って挫折したので、今回の動画とても参考になりました。ありがとうございます。
質問です。
①デザインをする人ってMacBookをつかっているイメージがあるのですが、Windowsでも問題ないですか。もし、今後買うとしたらどちらをおすすめしますか(今、Windowsを使っていて買い替えを検討中です)
②wordpress で使えるelementor というのがあると思うのですか、それとの違いはなんですか(Wordpress を使えるようにするまでの準備も1つかと思うのですが、それ以外の今後の見込みであったり、操作性など)
最後にLINEに登録したのですが、何か流れるのでしょうか。現時点ではメッセージも何もないです😅
ご質問ありがとうございます！
①windowsでも、性能が良ければ問題ないと思いますがmacの方がオススメです！理由としては最初からフォントの種類が豊富にあったり、色の再現性が高かったり、ショートカットキーが使いやすかったり等の理由があります。業界的にデザインはmacが浸透してますので、使ったことがなければmacがおすすめです。私はずっとmacユーザーなので実際にwindowsのメリットデメリットを感じたことがないのですが、macを使い続けて不便だった経験はないです！
②STUDIOは、様々なシステムと連携したい、動的に何か動かしたいなど連携出来るサービスは多々ありますが、自由度はWordPressと比べて低いです。での埋め込みやhubspotの連携など出来ることは広がっていますので、質問者様が、これは外せない！ということがSTUDIOで実現出来るのかを押さえていただくといいかと思います！
個人的には、STUDIOが今後伸びていくことは間違いないのでSTUDIOをまずしっかり始めていただいて、もしSTUDIOで不便に感じることが出てきた場合にelementorも学んでみるという流れでも問題ないと思います！
LINEに関しては、失礼いたしました。再度お送りさせていただきます！
公式LINEのメッセージ上限数に到達して、一部の人にメッセージが送れていなかったのが原因です。申し訳ございません。
またLINEでメッセージさせていただきますので何卒よろしくお願いいたします。
動画拝見しました。
ありがとうございます。
差込む画像の作成はどうされていますか？
ご視聴ありがとうございます！
画像は撮影するorフリー素材or有料素材になりますが、デモサイトであればフリー素材でいいかと思います！
@@user-qk8bi7us1j
ご返信、ありがとうございます。
自分で撮影、、、センスが問われますね💦
まずはデモサイトを複数作るところからですね💦挑戦してみます！
こんにちは。
こちらはこの状態で納品までいけるのでしょうか？
ボタンの有効化などもstudioでできるのでしょうか？
ご視聴ありがとうございます！
この状態から、あとは下層ページやタブレット、スマホサイズの調整をしたら納品が可能です。
ボタンもSTUDIO内でページを指定すればOKです！
動画を全て拝見させていただき、とても参考にさせていただいております！
現在3人目を育休中で副業として3年間ほどグラフィックデザイン全般で副業をしております。
また、以前はWIXでECサイトを自身で作り、海外の水着を販売する副業もしておりました。
ただ、仕事復帰になったら通勤に片道2時間掛かるため、WEBサイト制作で独立できればと本気で考えております。
10年ほど前に購入したMacbook Airが何かと不具合が起き始めたので、新しいものに購入しようかと考えているのですが、Macbook Airの13インチか15インチどちらがおすすめでしょうか？お教えいただけましたら幸いです＾＾
ご視聴、ご質問ありがとうございます！
外でもご自宅でも使われるということでしたら、15インチがおすすめです。
13インチですと全体のデザインを確認する時にかなり小さいので、デザイン作業にはオススメしにくいです！
ボックス設定の表示が、バナーで隠れちゃってるのが惜しいなと思いました。
貴重なご意見ありがとうございます！
失礼いたしました！次回からは気をつけます！
コメント失礼します。
タブレットやモバイルの画面になると上手く表示されません、
どうすればいいですか？
タブレットやモバイル版になると、それぞれの環境で少し調整しなければいけません。
基本はPCワイドで作る→タブレット版制作→スマホ版制作となります。
タブレットとスマホワイドでデザインを調整するとPCワイドではその調整は適応されないので、一度試してみてください！
@@user-qk8bi7us1j 丁寧な返信ありがとうございます！！
試してみます！
これからも動画楽しみにしてます！
よろしくお願いします！
独自ドメインで公出来ますか？
ご質問ありがとうございます！
有料版ですと可能です！
詳しくは以下をご覧ください。
help.studio.design/ja/
質問なんですけど、作成したものの保存はどうするのでしょうか？
ご質問ありがとうございます！
保存は自動的にされますので、一度STUDIOのホームに戻っていただくとファイルが有るかと思います！
おい！！！この動画にいくら払えば良い！！！！
言いたいことはわかるけどポジショントークにすぎない。センスは必要。
ご視聴ありがとうございます！
ここで言う「センス」とは、持って生まれた才能のことではありません。
センスとは何だと思われているか教えていただけますか？参考にさせていただきます！
「生まれ持った才能」って誰が言ったんですか…？
いい機会でしたのでこの場をお借りして皆様に伝えさせていただきました！
持って生まれたものをセンスと勘違いされている場合が多いので。
うまい言い訳ですね。言葉の選び方が巧みだと嘘っぽくなりますよね。「決めつけてすみませんでした」など人と向き合った言葉を選べばいいのにね。
ノーコードって20年以上前からあるんですが、センスが必要ないのであれば誰がやってもうまくいくはずだと思いませんか？にも関わらず挫折する人もいますよね。「センスがなかった」そういう人もいますよ。
＊あくまで傾向の話です
＊この話には暗黙の了解があります
っていちいち注釈が必要なん？
無料で見てイチャモンつけ放題。学校か職場で浮いてるでしょ君。
不快にさせてすみません。人にされて嫌なことはやめましょう。