早めに知っておいた方がいい!初心者が最短でWEBサイト制作のスキルを身につける為の行動3選!

WEBサイト制作を最短で身につけたい人は、ぜひ一読して下さい!

制作には、少なくともHTML、CSSといったマークアップ言語の習得が必要となります。

HTML、CSSの基本を学べるサービスは、ありがたいことに、たくさんあり学ぶことができる世の中になっています。

しかし、全ての知識を得られる訳ではなく、その後、どのように学習を進めていくかが非常に重要となります。

その過程で挫折してしまう人も少なくないでしょう。

私自身も、無料サービスから始め、独学で勉強してきた身なので、大変なこともよくわかります。

そこで、今だから分かる、勉強始めたての頃に実践すべき重要ポイントを3つお伝えします。

1、実践的な学習を早めに行う

WEBサイト制作を勉強し始めたばかりの初心者の方なら特に、「いきなり実践なんて無理!」と思っている人も多いのではないでしょうか?

実は私も、HTMLやCSSを学び始めた頃は、とりあえず覚えようと暗記的な学習法で、Progateやドットインストールを何度も反復していた過去があります。

今思うと、とても無駄な時間だったと思います。

なぜなら、全て暗記なんてほぼ不可能だからです。実際、私が制作をする時は、コードを知らなかったり、忘れている事もたくさんあり、その都度調べています。

その経験から導き出した1番良い方法が簡単なサイトを作ってみるような経験を積みながら、覚えていくという事でした。

最初は自信がないでしょう。

それは私も同じでしたが、実践で初めて見つける発見や、よく使うコードが解るようになるなど、必ずプラスに働くはずです。

マークアップ言語の基本を一通り把握したら、実践は早めに取り組んでいきましょう。

2、ググり力を意識づける

先ほどまでの話にも出ましたが、コードを書いていく時に、全て暗記している人間はいません。それができるのはAIぐらいです。

そうなると大切になるのが、どれだけ”素早く”、”的確な”情報を得ることができるか、つまりググり力ということになります。

情報が民主化した現在の社会において、調べてわからないことはほとんど無くなりました。

WEBサイト制作においても、私のように情報を共有する人は沢山いて、だからこそ独学でスキルを習得できる人がいるのです。

ただ、人間というのは、面倒くさいことを避けてしまう生き物です。その為、途中で挫折してしまう人も現れてしまいます。

人や教材に頼る事も、効率や理解力の向上のためには、必要な場合もあります。

しかし、将来的に企業で実務に就いたり、フリーランスとして働く時に、常に助けてくれるような暇人はほぼいません。

初めてみるエラーが出た場合どうしますか?

自力で解決しなければいけない場面は、今後数え切れないほど出てくるはずです。

不安に感じてしまった方は申し訳ありません。それでも、これでググり力の大切さが何となく理解できたと思います。

初心者が、早い段階で何事も調べる意識を持ち、取り組んでいたら、とても大きな力に繋がるはずです。

ぜひ参考にしてみてください!

3、同じ志を持った人と繋がる

WEBサイト制作やプログラミングを勉強する人は、近年増え続けていますが、需要はまだまだ高いのが、IT業界の現状です。

出典:『IT人材需給に関する調査(2019)』(生産性上昇率 0.7%、IT 需要の伸び「中位」の場合)https://www.meti.go.jp/policy/it_policy/jinzai/houkokusyo.pdf

そんな中、独学で学習を始めようとする人も多いと思います。

あなたもその一人ではないでしょうか?

しかし、独学で始めた人で挫折する人が多いのも事実です。

「好きこそ物の上手なれ」という、ことわざがありますが、WEBサイト制作においても、好きな人は自分でどんどん調べるので、自然と上達していくものです。

孤独にひたすら取り組んでいても、いつか限界が訪れてしまいます。

私もその1人でした、、、

その時、実践したのが、TwitterなどのSNSでWEBサイト制作を始めたばかりの人を見つけることでした。

つまり、同じ志を持った人ですね。

この人は、どんな勉強をしているんだろうか?気になれば、ダイレクトメッセージでコンタクトをとるのも良いと思います。

仲間が見つかるだけで、とても安心した気分で作業を続けられるはずです。(個人的な意見でもありますが、、、)

自分からSNSに投稿するまでの熱量はまだ無いかも、、、

そう考える人にもメリットはあります!

熱量が低く、自分のあまり得意ではないようなスキルを身につけようとする人は、かなりの確率で、挫折してしまいます。

その対処法として、SNSを使い、同志を見つけましょう。

同じ悩みを抱えている人もいるはずですし、何より意志の弱い人は、誰かに見られている、最後までやり切ろうと思える環境を、自ら創り出すことがとても大切です。

そんな人見つかるの?

そんな心配を持っている人ももしかしたらいるかもしれませんね。

私の経験上の事になりますが、意外とフレンドリーに接してくれる人はたくさんいます。

恐らくですが、初心者の人は不安が多い為、安心するために、仲間を欲している人がたくさんいるんだと思います。

時には、実際に現場で働いている人や、フリーランスの方から「いいね」を貰えたりする事もあり、応援してくれる人は意外と多いので、恐れず、挑戦してみましょう!

今回のお話は、私がWEBサイト制作を始めたた時、「やっとけば良かった」、「やって良かった」経験の話ですので、少なからずお役に立てると思います。

自分に合った取り組み方を見つけながら、最短でWEBサイト制作のスキルを身につけていきましょう!

Daily UI#006 UserProfileのデザインをAdobeXDを使い初心者が挑戦してみた!

Daily UI#006の課題はUser Profileです!

TwitterやInstagramを使っている人ならよく知っているプロフィール画面です。

今回から色にも気を使ってみようかなぁ

なんて思いながら、いざスタート!

とりあえず、自分がインストールしているSNSなどのプロフィール画面を確認してみます。

すると、1番見やすくわかりやすいのは、やはりTwitterでした。(個人的意見)

あれだけ人気になるだけあって、シンプルながら、プロフィールに全部詰まってますよね!

ということで、今回はデザインはTwitter似のシンプル形にしながら、色にもこだわってみました!

できた作品がこちら!

けっこう可愛らしい色になっちゃいましたw

まずは、コンセプトですが、Daily UI#005のアイコンからの繋がりで、クリエイター向けSNSのプロフィール部分をイメージして作ってみました!

Twitterと同じように、ヘッダー画像とプロフィール画像を載せれるようにしています!

クリエイター向けということで、自己紹介だけでなく、自分の作品を載せられて、ポートフォリオになるように設定してみました。

自分が作ってみたいアプリやサービスを想像しながら制作すると、とても楽しいし、イメージがどんどん膨らみます!

これからも、この発見を参考にしながら頑張っていきます💪

こんな感じで、今回もDaily UI#006終了!

Daily UI#005 AppIconのデザインをAdobeXDを使い初心者が挑戦してみた!

Daily UI#005の課題はApp Iconです!

スマホが使われるようになり、アプリのアイコンを見ない日はないですよね。

今回もお手本が山ほどあるのでかなりとっつきやすい課題でした!

さてさて、今回も制作を始めたのですが、まずはどんなサービスのアイコンなのか、バックグラウンドから決めていきました!

こんなアプリにしたい!
①クリエイターが意見を共有できるSNS
②お互いに高め合える出会いの場
③心温まる空間をオンライン上に作る

こんな感じでイメージしてみました!

これを参考にアイコンの作成していきます。

最初にオレンジっぽい色を背景色に使って、温かみのある空間をイメージできるようにしました!

次に、クリエイターと言えば、パソコンを使っているイメージなので、デスクトップを入れています。

最後にパソコン内で人と人が手を繋ぎ、助け合っている風に作ってみました!(言わないとわからないぐらいのデザインセンスの無さw)

今回、App Iconの作成で感じたのは、Adobe XDって、けっこうデザインの制限あるよねーってこと!

Twitterでみんなの作品見たけど、どうやってあんなオシャレに作ってんだよ!って思ってましたw

Adobe XDはよく使うから、Daily UIを機にもっとマスターしたいですねー。

まぁそんなこんなで、今回もDaily UI#002終了!

Daily UI#004 計算機のデザインをAdobeXDを使い初心者が挑戦してみた!

Daily UI#004の課題はCalculator!

つまり電卓ですねです!

これは見慣れているので、とっつきやすい課題でしたねー!

今回も他の人がどんな作品を作ったのか調べるところからスタート。

すると、みなさん個性豊かなデザインを取り入れており、むちゃくちゃセンスあるなぁ、、、

けっこう自分のセンスの無さに落胆しちゃいましたww

一度聞きたい!
やっぱりセンスある人はデザインが勝手に思い浮かぶんですか?

ともかく、あんまり時間も使っていられないので、いざ制作へ!

デザインは見やすさが全てなので、シンプルにしました!(思い浮かばないだけですけど)

それだけだと物足りないので、どうにか付加価値をつけて、使いやすいと思ってもらう工夫を考えました。

こういう時に大事なのは客観的な視点!

自分が使うなら、どんな電卓を使いたいだろうか?

そう考えると、計算をしている時、式がついていると、なんとなく役に立つだろうと思ったので、付け足してみました!

もちろんあまり主張させたくはないので、小さめで!

かなりシンプルですが、今回もなんとか完成しました。シンプルなデザインでも学ぶことはありますね〜。

これにてDaily UI#002終了!

Daily UI#003 ランディングページのデザインをAdobeXDを使い初心者が挑戦してみた!

今回の課題はランディングページ(LP)!

WEBデザインを学んでいく中でもかなりの頻度で聞く言葉です。

調べてみるとランディングページには2つの意味があるようです。
1つ目は検索や広告からユーザーが最初にアクセスするページという意味。
2つ目はユーザーの行動を促す縦長のレイアウトのページという意味。

一般的には2つ目の解釈で考える人が多いそうですが、なかなか複雑なので、もっと勉強が必要ですねー、、、

そんなこんなで調べる時間は終わりいざ制作へ!

検索の最初のページをイメージすると、やはり見た目がすごく大事そうですね〜

なので今回はパッと見て、使ってみようかなと興味を持ってもらうことを意識して作ってみました!

最近読書にハマっているので、読書家が感想をシェアする空間をイメージしました。

デザインはめんどくさいと思われないようにシンプルに!
なおかつ、落ち着いた雰囲気を感じるような背景に!

そんな感じで今回もなんとか完成しました!

やっぱり分からない事が多くて、日々勉強しなければいけないことを痛感しますね!

これにてDaily UI#003終了!

Daily UI #002に挑戦してみた!

Daily UI#002の課題はクレジットカードです。
意外といろんなサービス見てきたつもりでしたが、いざ作るとなると、どんな項目があったか分からなくなり、今日も調べるところからスタート!

そしてできたのがこちら!


自分がクレジットカードで決済する時を想像すると、間違えることが不安としてありました。その為、できるだけシンプルなデザインにすることで、ユーザーも迷うことなくスムーズに進めるのでは?という仮説を立てました。その為、変わったデザインなどではなく、シンプルな設計で安心感を出しました。

登録ボタンだけ目立つような色を使い、自分もクレジットカードを初めて使う時セキュリティコードがわからなかったので、ヘルプもつけました!

クレジットカード決済は利用者が多く、ネットショップなどの開業時には必ず導入するべき機能です。

しかし、調べていく中で気づいた事として、実際にはセキュリティの問題などの観点からUIを作る事はほぼないそうです。

それならばオリジナリティ溢れるデザインにするべきだったかとも思いましたが、まぁいいでしょうw

クレジットカード決済の画面なんてこんな機会がないとじっくり見ない上、ユーザー目線で考える機会としてはとても勉強になりました!

これにてDaily UI#002終了!

Daily UI 001のお題と手順の参考例

Daily UI#001制作

はじめまして!

デザイン初心者の文系大学生が100日間のDaily UIに挑戦してデザインスキルを身につけていくブログです。

センスはありませんが、温かく見守ってください。

少しでも参考になればと思います!

それでは今回作成したDaily UI#001について確認していきましょう。

#001のテーマはサインアップ画面でした。

どのアプリにもある登録画面ですね。
これは、よく見る画面な為、想像しやすく、どんな内容を入れるかは考えやすかったです。

あとはどんなサイトのサインアップ画面を作るかと、サインアップ前にユーザーの離脱を防ぐためにどうするかいう事でした。

少し悩んだため、twitterでみんながどんなものを作っているか少しチェック、、、

レベル高‼️
と感じる画面ばかり、、、

でも自分にはきれいなデザインがパッと思いつかない為、好きなように作ってみようと思い、制作開始。

その時、南国に旅行したいなぁと思っていたので、「それでいっちゃえ」と、海外旅行の旅先を紹介してくれるサイトをイメージして作成しました。

背景にそのサイトのイメージがわかるような色や画像を使えば、関心は高まるのではないかと思い、利用することに。

できた作品がこちら

背景も配色も南国感満載のサインアップ画面ができてしまいました、、、

これじゃ旅先は南国限定にしたほうがいいかなぁ?

ちなみに背景はぱくたそさんからお借りしました。

中身はシンプルにメールアドレス、パスワードを入力したらサイトに入れるようにしました。

パスワードよく忘れてしまうので、救済措置も忘れずに!

フォントとかあんまり考えず作ってしまったので、そこは次回からの課題ですねー。

ていう感じで1日目は完了です!