【閲覧くださっている皆様へ】URLが変わりました。一部転送が完了していない内部リンク先があります。「404 Not Found お探しのページは見つかりませんでした。」という表示になる場合は、"https://bits-lifestyle.com/jigaku-study/●●"から、"https://study.bits-lifestyle.com/●●"へ書き換えてアクセスくださいますよう、お願いいたします。ご迷惑をおかけいたします。

 
スポンサーリンク

HTML・CSS・初心者の実践練習:サイト模写の具体的方法(LP制作・WordPressの場合)

HTML&CSS

HTML・CSSが初めての方がプロゲート等で学んだあと、どう実践練習を踏んでいけばよいかを目的別にお話します。

今後の目的により異なります

HTML・CSSを現時点でどのくらい極めるべきなのかは、今後進みたい方向性によって異なります。

①LP(ランディングページ)等を制作して、仕事を受注したい(副業含む)

この場合は、巷のWEBサイトであるような定番のデザインは制作できるようHTML・CSSをマスターする必要があります。3~5個くらいはLP模写をしてみたほうが良いでしょう。

ちなみにクラウドソーシング等でもHTML・CSSのみで受注できる仕事はあります。

ですので、まずサイト模写練習等をしてHTML・CSSの実践力をつけたら仕事を受注しみるのもよいと思います。JavaScriptの勉強はその後でも大丈夫です。( JavaScriptができたほうがやはり幅が広がります。)

②ブログを書きたい(広告収入を得たい)

HTML・CSSを使わなくてもブログを書くことはできます。例えば無料ブログのアメブロを使う際は、一般的にあまりHTML・CSSをカスタマイズすることはありません(カスタマイズが制限されている仕様です。)

また、例えばWordPressを使う際も、既存テーマを使えば初めからデザインはできています。 ブログを書くことが目的の場合は、デザインは既存のものを活用し、コンテンツ(文章の中身)の制作の方を重視したほうが早く成果は出るかもしれません。

とは言っても一部のデザインを修正したいときや、下記③のようにオリジナル度を上げていきたいときに、HTML・CSSをカスタマイズする必要は出てきますので、コンテンツ作りと並行して少しずつHTML・CSSの力も伸ばしていくことをお勧めします。

そういった意味では、LPの複写などはとりあえずおいておいて、HTML・CSSのカスタマイズの必要性が出てきたときに、必要なコードを検索等で調べていく方が実践的とも言えます。

③自分のオリジナルWEBサイト(サービス)を制作したい

この場合も、プログラミング初心者であれば、まずはWordpressでプラグインなどを使い、制作していく方が手っ取り早いのではないでしょうか。

デザインはWordpress既存テーマが使えるので、作りたい機能を設置することにまずは注力し、後ほどHTML・CSSを勉強しなおしても遅くはありません。

もちろん、LP模写をした方がせっかく勉強したばかりのHTML・CSSも身に付きやすくなりますので、やっておいて損はありません。ただ、HTML・CSSを極めるより先に、WordPress等の使い方を覚えていく方が優先度が高いと思われます。

ちなみに私の場合は、②と③が目的だったので、プロゲートでHTML・CSSを学んだあと、1つだけLP模写してすぐにワードプレスでブログを立ち上げてしまいました。

HTML・CSSについては、デザインをカスタマイズする際はネットでコードを検索したりしてコードをコピペすれば大体やりたいことが実現できました。

HTML・CSSの本格的な勉強が必要になったのは、オリジナルテーマを作成することになってからです。結果的に、そのおかげでLP制作などの仕事を受注することができるようになりました。

LP模写の手順

模写するサイトを見つける

巷には、参考になるサイトの紹介ページがたくさんあるので、その中で気に入ったデザインのサイトを選べば良いのですが、その「お手本」サイトの多くにJavaScript等が使われていて、プロゲートで習ったレベルでは対応できないサイトも多く、意外と適切なサイトを見つけるのに苦労します。

見つけるポイント

  • なるべく動きの少ないサイト
  • 画像中心ではなくて、テキストも多く配置されているサイト
  • 長方形や正方形が中心のレイアウト
  • 色が2色程度を基調にしているシンプルなサイト

サイトの例

《私が模写に使ったサイト》

大名古屋ビルヂング
大名古屋ビルヂングは、発展著しい名駅前に、合計で10,000坪を超える大型集客施設が誕生し、名古屋・東海エリアの方々に、「上質」で「旬」な店舗でお買い物やお食事を楽しんで頂くことに加え、「働く」「住まう」「憩う」など、ライフステージのあらゆる場面に新しい価値を提案していきます。

こちらはシンプルな作りとなっており、初心者でも真似しやすかったです。黒とゴールドで高級感のある色使いも勉強になりました。大変お世話になりありがとうございます。

※一部、「タブ」機能が使われていて、切り替えが必要になるので、そこは一部だけ模写しました。

《模写向きのサイトの紹介ページ》

初心者がLP模写をするときのオススメサイト3つを難易度別に紹介
こんにちは!Takeshi(lhZJlNpUPZ1iCfR)です! LP(ランディングページ)の模写に挑戦してみたいけど最初はどんなサイトを模写すればいいの? 今回はコーディング初心者の方に向けて、最初にLPの模写をするのにオススメのサイト

《お仕事を受注したい方は、こちらもおすすめ》

コーポレートサイトは需要が多いです。「集客用」「営業用」サイト作成の制作会社のホームページ等で制作例を調べると、適切なサイトがたくさん出てきます。実際に公開するのは丸コピはまずいですが、勉強にはもってこいです。

HTML・CSSで同じデザインを再現しようと試みる

こちらのサイトに詳しく載っていました

【初心者向け】Webサイトのコーディング勉強法【Progateの次のステップ】
こんにちは、WebエンジニアのKosaku(@bouru_02)です。 「WebエンジニアになりたくてHTML/CSSを勉強したけれど次に何をすればいいのかわからない…」 このページでは、HTML/CSS/j ...

WordPress上でのLP模写

私の場合は、すでにWordpressで無料お試しをやっていたので、お試しも兼ねてWordpress上でのLP模写という、若干邪道なやり方をしました。(笑)
※しかも、既存テーマを使い、もともとレイアウトが組まれている状態で行いました。

それでも、勉強になることは多かったです。実際、WordpressでもLPを作れる機能は少なく、きれいに作ろうとするとHTML・CSSを操る必要があります。

この手順については、次回詳しく説明します。

お手本サイトのコードを確認して答え合わせ

①お手本サイトのURLを開く

②コードを見たい箇所を右クリック

画像は、大名古屋ビルディング様のサイトを引用しました。

③要素の調査を選択

④選択箇所に関するHTMLやCSSを確認することができる

⑤自分の書いたHTML・CSSと上記を比較して、修正する。

コードが全く同じである必要はありません。実際、同じ表示の仕方でもいくつもの書き方がありますので、それを勉強できればOKです。

まとめ

LP模写をどの程度きちんとやるかは、目的に応じて使い分ければよいと思います。

ただ、HTMLやCSSでデザインするならば、「要素の調査」で調べながら自分のサイトのデザインを修正するスキルは必須になります。それに慣れるためにも、プロゲート等で学習後、一度LP模写をしておくことをお勧めします。

コメント

WP Twitter Auto Publish Powered By : XYZScripts.com
タイトルとURLをコピーしました