雪も溶け日差しも暖かく感じる季節になると、何か新しいことにチャレンジしてみたい！と思う方も多いのではないでしょうか？
子育ても一段落して、”今年こそ何かを始めたい！”と思っている方や、”何かスキルを身につけて新しい仕事をしたい！”と思っている方など様々だと思います。
特に結婚やご主人の転勤などで一度職場から離れてしまうと、また仕事を始めても、今の自分のスキルではもう通用しないのではないか？と不安に思うこともありますよね。
新しいスキルを習得するには時間もお金もかかりますからスキル選びに失敗したくない、とかこれから初めての経験をすることに一歩踏み出せない方もいらっしゃることでしょう。
そんなあなたに、時間も場所も選ばず学習やスキルアップができ、スキルアップしていけば再就職や独立も夢ではない、「簡単ホームページ作成の秘訣」をお伝えします。
スキルアップをしたいが時間がないお金もあまりかけられない状況で、パソコンはエクセルとワードくらいしか使えなかった私も、昨年末から自宅で学習し、まさかのプロ並みのホームページが作れるようになってきました。
それも ”たった２つのソフトをマスターする” ただそれだけ！
ホームページやWEBのことなど超初心者だった私が書いている記事なので、これから始める方にもわかりやすい内容だと思います。忙しい状況の中で次のステップを目指す、あなたのお役に立てれば幸いです。
目次
初めてホームページ作成をするには
ホームページ作成は転職や独立へのスキルアップの１つではありますが、自分で個人のホームページをもつことやWEBショップを立ち上げることもでき、個人でWEB上で仕事をするツールとしても有効です。
ホームページを作る上で一番大事なのは、デザイン云々より先に、コンセプトをしっかり決めることだと思います。何を誰に伝えたいのかをしっかり決め、どんな情報が必要かを考えた上で、まずはノートでも良いので、ホームページ画面のアイデアを書いてみます。
それがしっかり決まったら、次はソフト選びです。
お手軽なホームページ作成ソフトを使ってみて思う、メリットとデメリット
ホームページ作成ソフトは、無料で操作がかなり簡単なものから、自分でコードを組んでプロ仕様に仕上げるものまでたくさんの種類があります。
私もはじめは、ネットでたまたま見つけた無料のソフトからスタートしました。独学で作ったので自分の視点から見たお手軽なソフトのメリットとデメリットをご紹介します。
メリット
・コストをかけずにホームページ作成が可能
・初心者向けなので操作がかなり簡単
・HTMLやCSSの知識がなくてもホームページを作成出来る
デメリット
・無料の場合、他の企業などの広告が入ることがある
・無料の場合、独自ドメインが設定できない
・決まったテンプレートしかないためオリジナリティに欠ける
・リニューアル時の変更が難しい、または最初から作り変えないといけない
・SEOが考慮されていない場合が多い
私も無料のソフトで2週間かけてホームページを作成してみましたが、ショップカートの決済方法やショップに掲載できる商品数にかなり制限があることに気づいたり、他社の広告が入ってしまうのは気になりました。ログイン方法が変更してページ自体が開けなくなる、なんてこともあり、ソフト会社側の変更点なども随時チェックが必要です。
DreamweaverとPhotoshopを選んだ理由
集客力のあるホームページを作りたいと思いながらもWEBの知識がなかった私は、まずはお手軽な無料ソフトでスタートした訳ですが、できることの制限がかなりあることを知り一旦断念。
実際のところ、無料のお手軽ソフトでは切って貼るような感じで、WEBの知識はなくても簡単に作れるようになっていますので、スキルアップや今後の転職に繋げるのは程遠いこともわかリました。
初心者の自分でも操作が出来てかつ仕上がりがプロっぽい、そんなソフトはないかなと探していたときに、ネットでふと見つけたのがPhotoshopとDreamweaverを使って１ヶ月ちょっとでホームページができるというスクールでした。
その時はPhotoshopもDreamweaverも全く知らない状態でしたが、そのスクールのYouTubeで配信されていた内容を見る限り、自分の思うように作れ、しかもプロっぽい仕上がり、そして簡単そう、そんなイメージが広がり、「これにチャレンジしてみよう！」と即座に決めた訳です。
Dreamweaverとは？
では、Dreamweaverは一体どんな感じなのか、扱い出せば奥が深いのでまずは基本的な特徴をお話します。
HTMLとCSS
Dreamweaverに入る前に、ホームページ作成の場面でよく出てくる用語にはHTMLとCSSという言葉があります。
HTMLとはHypre Text Markup Languageの略で、ウィキペディアなどで調べると、ハイパーテキストを記述するためのマークアップ言語の１つである。とあります。簡単言うと、ホームページを作るプログラミング言語です。HTMLは英語みたいな感じで、基本的なことを覚えていけば、自分でどんどん使うことができるようになります。
CSSとはWEBページのスタイルを指定するための言語です。HTMLで文章を作り、その文字の色やサイズ、マウスを動かした時に色を変えるなど、ホームページを装飾していくための言語となります。
Dremweaverの特徴
Dreamweaverもホームページ作成用のソフトですが、プロのデザイナーにも耐えうる本格的なソフトで、使いこなせば質の高いホームページを作ることが可能です。ホームページを作るのに不可欠なHTMLの入力は必要ですが、その作業を効率よく簡単にできる入力機能が付いています。
プロ向けのホームページ作成ソフトは他にもありますが、Dreamweavewは、実際にブラウザにどう映し出されるかを見ながらHTMLを入力できるので、全体をイメージしやすく、作業効率が大変良いのが特徴です。
その使いやすさと仕上がり質の高さからWEBデザイナーなどプロの世界でも多く使われています。
テンプレートを使って時短・簡単作成
ホームページを作る上で１からコードを書いていくよりは、ホームページにも素材のようなテンプレートがありますので、それを使うのがかなり有効で仕上がりも綺麗で早いです。テンプレートはネットで調べると、有料と無料のものなど色々な種類のものが出てきます。
まず素材をダウンロードして、その色や文字写真などを入れ替えたり、バナーを組み込んでいきオリジナルなものにしていきます。テンプレートのソース（プログラム自体）を少しずつ組み替えていくだけで、「ここを変えたらこう変わるんだ」と言うことがわかるので、コードを１から書いていくよりできるのも早く、また自分でコードを覚えるのも早くなります。
Dreamweaverを使ってみてよかったこと
無料のソフトでもテンプレートは使いましたが、無料のソフトの場合、全てのコードはすでに組み込んであるものでしたので、ソース自体を見ることも触ることはありませんでした。そのため、作り方を覚えたとしても、そのソフト限定でしか作れず応用はできませんでした。
Dreamweaverは、テンプレートを使えば逆にホームページの構造がどんどん理解できて、HTMLタグの使い方や装飾の仕方が覚えられるので、新たにホームページを作成するときも応用できるようになり有効だと思います。
一見、HTMLなどのコードを見ただけで倦厭しがちですが、Dreamweaverは覚えていけばいくほど、自分のスキルアップや実力になっていくと確信できるツールです。
Photoshopとは？
操作は簡単！本格的にWEBデザインができるツール
次に、ホームページには欠かせないバナーや画像の編集などができるPhotoshopとはどんなソフトか？
Photoshopは写真の編集加工、デザインやイラストの作成など様々な用途に活用できます。写真を丸く加工したり、切り抜いたり、明るくしたり、組み合わせたり、文字や背景の色やデザインを変えたり、色々な作業が簡単で美しく仕上げることができるツールです。
Photoshopでできること
・写真の明暗・サイズなど調整
・顔のにきび消しのような修正
・人物の写真は髪の細部まで切り抜ける
・写真をいろんな形に切り抜き加工ができる
・文字の装飾
・写真の加工や文字など組み合わせてバナーなどが作れる
・ボタンなどが簡単に作れる
などなど、使いこなせば色々なことができ、そのデータをホームページに組み込んでいけばプロが作ったような仕上がりになります。
Photoshopを使ってみて良かったこと
実際、私が最初に学んだのがPhotoshopでした。バナーと言うものがどんな風に作られているかも知らない初心者でしたので、始めに文字を入力し色を付け、グラデーションや影などをつけるだけで、WEBの中で見たような仕上がりになりすごいと思いました。
写真の加工も、知れば知るほど色々なことができるので驚きです。私が学び始めたのが11月頃からでしたので、その年の年賀状は練習がてらPhotoshopで作りました。写真の修正も配置も綺麗に決まるし使いやすく、自画自賛ですが良い感じにできました。
ホームページでは、トップバナーやサイドバナーを作ったり、ボタンや写真などPhotoshopで作り組み込みました。デザインが多様にできるので、組み込んだバナーや加工した写真などは、写真そのままを貼るだけより、プロっぽい感じに仕上がり良かったです。
自宅で好きな時間にスキルアップ可能！
YouTubeを使って操作法を学ぶ
前にお話しましたが、私はスクールのYouTubeがこのDreamweaverとPhotoshopに出会う大きなきっかけとなりました。私がチョイスしたのは、日本デザインの”ゼロイチWEBデザイン”のオンラインスクールでした。（https://youtu.be/Zgp4xVSIyCQ）
私は、学んだらすぐに自分で実践できる様な実力がつくところ、を探していたので、プロの現役デザイナーさんが講師の実践的なこのスクールに決めましたが、今、YouTubeなどでもHTMLなどの講座はわかりやすいものが色々出ているのと、単発の講座も企画されているので、まずはどう言うものかだけでも自分の目で確かめてみるのが良いのではと思います。
私も学習はオンラインのスクールでしたが、何度も繰り返し内容が観れるのがポイントでした。全くの初心者では１度聞いただけでは理解できないことも、何度も内容を観ながら実践すると徐々にわかってくるものです。そう言う意味で、YouTubeは何度も繰り返し観ることができ、好きな時間に場所を選ばず学べると言うことでお勧めです。
番外編 Ilustratorも独学で使ってみました
Photoshopと似ているソフトでIlustratorがあります。
今回、LP(ランディングページと言う１つの商品やサービスを売るための長いWEBページ
→参考資料：LPの参考です！ここをクリック！）を作るために、初めて使ってみました。IlustratorとPhotoshopとの違いを簡単にまとめると・・・
Photoshop
・点の集まりでできたラスター画像を扱い、多彩な写真の加工ができるソフト
・写真の様なドットでできた画像の加工に向く
Ilustrator
・拡大縮小しても荒れないベクター画像を扱い、正確なデータ・レイアウトの作成を得意とするソフト
・文字組やレイアウト、イラストやロゴの作成に向く
今回は、Photoshopで写真のデータを作り、その後Ilustratorの画面にそのデータを挿入し、文字やイラストを足して作ってみました。
Ilustratorの操作方法はPhotoshopと似てはいましたが、わからないところは全てネットで調べ、何とか形にしていきました。Photoshopの基本的な知識があったので、Ilustratorの操作方法は以外に簡単で、両方の特徴なども少し理解できた様に思います。
おわりに
Dreamweaverとphotoshopだけでプロ向けのホームページが実現します
私も、学び初めてまだ４ヶ月目の初心者ですが、Photoshopの写真加工機能を使った、バナーなどのデザイン技術を学び、テンプレートを使用したDreamweaverでの、ホームページの作成を繰り返しすることで、感覚的に操作法やこうしたらもっと良くなるのではと言うアイデアがどんどん出てくる様になりました。
今思うと、無料のホームページ作成ソフトでは、ここまでのベースアップは難しかった、やはりプロも使うソフトだからこそできる技だと思います。
でもそれは ”たった２つのソフトをマスターする” ただそれだけで、あなたにも実現します。
スキルアップや転職をこれから考えている方へ、スキルアップするならそれなりのものが作れないと仕事には繋がりません。でも、選ぶべきものを選び、自分の最大限の時間と努力を注いだら、短期間でも本当に手に入れるべく技術は習得できます。
これは、初心者からスタートした私が経験して思う真実なので、あなたにも必ず習得できる技術だと思います。
ぜひ、これからの転職や独立の夢を叶えるために、この ”たった２つのソフト” の技術を習得してみてはいかがでしょうか？
まずは業界のことを知ることからはじめよう！
