見出し画像

WEBデザイン勉強仲間を増やしたい！「きょうのDesign Tip」を始めました【webデザイン勉強4日目】2020/4/12

ひつじ田メイ子

「きょうのDesign Tip」を始めてみます👌

この3日間、noteが続いてます！えらい！

ただ、このnoteは自分のメモ的な感じなので、「人の役に立ててるか？」というと微妙かな、と思いました。

なので、1日の中で「なるほど~」と思ったDesign Tip（デザインのお役立ち報）を最初に簡単にシェアしてから、以下は自分の勉強日記にしようと思います、

日記は読み取ばしてしてもらっても良いので、ちょっとでも良いな~と思ったら💖押してもらえると嬉しいですっ

【きょうのDesign Tip】Adobe XDとDreamweaverって何が違うの😶？

恥ずかしながら、私。
XDとDreamweaverの違いを分かっていません。

XDもWEBデザインできるんじゃないの？
DreamweaverもWEBデザインできるよね…？

そういう疑問を抱えつつ勉強していたので、改めて調べてみました。

◎最初に結論◎
XD→プロトタイプツール（試作品を作るツール）
Dreamweaver→コーディングツール

だそうです。

XDでデザインカンプ（試作品）を何回か作ってブラッシュアップして、OKだよということになったら、Dreamweaverコーディングしていくということらしいです。

つまり、XDとDreamWeaberは別物ということ。

いままで、XDでそのままコーディング作業もできると勘違いしていたのが、混乱の元だったようです。

では、XDからコーディングしていくにはどうすれば？と思い検索してみたところ、クリ★スタというサイトでXDからコーディングしていくための練習データを用意してくれているみたいです↓

取り組むレベルとしては、「PorgateでHTML/CSS、jQueryを学習した方」となっているので、jQueryを勉強したら私も取り組んでみようと思います！

おまけ：コーディング無しでWEBサイトが作れるサービス
わざわざコーディングしなくても公開までできるSTUDIOというサービスもあります✍

自分の用途と合えば便利かと😍

WEBデザインの勉強日記💡

・Dreamweaver触ってて、ProgateでHTML/CSSの基本を理解しててよかったなと思った。知らなかったら何してるのか分からんってなってたと思います。

Dreamweaverのチュートリアルをやってます

Progateと違って、文字が多いのでかなり進みが遅い。

「この作業、いま全体の作業中のどのあたりにいるの？」と分からなくなることが多いので、自分の確認のために項目を貼ります。

1.HTML5要素を使用してwebページの構造を定義する　←イマここ

2.DOMパネルを使用してページのどこにいるのかを調べ、新しい要素を追加する

3.ページにテキストと画像を追加する

4.Creative Cloudライブラリから画像をダウンロードしてリサンプリングする

5.DreamweaverのCSSデザイナーを使用してページのスタイルを設定する

6.2番目のwebページを作成して、同じようにスタイルを設定する

7.ビジュアルメディアクエリバーを使用して各種レイアウトを制御する
（https://helpx.adobe.com/jp/dreamweaver/how-to/make-website-pt1-site-setup.html ）

Part1＜プロジェクトの概要とサイトの設定＞終了

とりあえず、コードを書いていく前の土台を作っていく作業。

知らない用語が多いのは大変だ～

人間と同じように、HTMLページは1つの頭（head）と1つの体（body）しか持つことができません。
（https://helpx.adobe.com/jp/dreamweaver/how-to/make-website-pt1-site-setup.html）

↑この表現すごくないですか。
これで<head><body>の個数を忘れることは無いと思う。

Part2<テキストコンテンツの追加と書式設定>終了

コードを手打ちで書いていくのではなくて、ボタンみたいなのを作って、効率的にコーディングしていく勉強のようなものをした。

ルールさえ覚えれば便利に書いていけるのかもしれないけど、独特の癖がなかなか抜けない。

作業時間と進捗🔥

✔Dreamweaverのチュートリアル 40%　
→未達、35％。チュートリアルPart1、Part2完了。Part3半分まで。

4/13の予定✨

✔Dreamweaverのチュートリアル Part4まで　

たこやきたべたYO-YO🐙


疲れがたまりやすい今日この頃です。
ゆるゆる行きましょう~🐑✨

この記事が気に入ったらサポートをしてみませんか？