私は6年ほどWebエンジニアとして働く中で、最近制作物のレビューを行うことが多く、具体的には
- 制作会社の品質管理
- 外注した案件のディレクション
- プログラミングスクール講師として受講生のコーディング課題へフィードバック
- 私が出しているコーディング演習課題の添削希望者の課題をレビュー
こういったことをしてるんですが、
驚くほど、実はみんな同じ様なところでミスをしています
みんなミスする所は自分もミスしやすい所なので、それを事前に知っておけば最初から高い完成度でコーディングできるということになります。
今回はよくあるミスを集めて解説していきますが、ミスの種類を大きく3つに分けました。
- 見た目や機能のミス
- コーディングのミス
- 損害賠償もののミス
今回の内容を最後まで見て実践してもらうことで、
綺麗にコーディングできていますね！いつも丁寧にありがとうございます！
とクライアントに言われるような、「初稿から完成度が高い高品質コーダー」に一歩近づけますし、最後のミスは本当に損害賠償に繋がりかねなくて、皆さんの隣にあるトラップなので、
是非最後までご覧いただき、今日から実践できるようにメモしていただければと思います。
私が出しているコーディング演習課題でも、今日紹介するポイントをご自身でも徹底的に確認していただきますので、頭に入れて進めて貰えればと思います。
それでは、早速見ていきましょう！！
この記事を書いたのは
しょーご（@samurabrass）
当ブログ「しょーごログ」の運営者。2018年からWeb制作・フロントエンドエンジニアとして主にWordPressでのサイト制作やシステム開発のフロントエンドを担当。同時にブログとYouTubeで情報発信を行っている。駆け出しエンジニアのコーディング課題添削も行い、スクール講師を4年以上している経験を活かした分かりやすい記事制作を心がけている。
＼現役エンジニアのレビュー付き／
実践レベルのコーディング課題公開中
- デザインカンプからのコーディングを経験したい
- 現役エンジニアのレビューを受けてみたい
- 即戦力級のポートフォリオを用意したい
2024年にデザインを完全リニューアルしています！
コーディングに自身をつけるにはプロからのレビューを貰うのが必須なため、制作会社も利用するレビューツールで添削をしています。
Web制作学習ロードマップにも取り入れているため、学習終了まで迷わず進むことが可能です。コーディングを本気で仕事したい方はぜひご活用ください！
＼無料の入門編から本格企業サイトまで／
YouTubeでも徹底解説しており反響頂いてます🙇♂️
見た目や機能に関するミス
❶タブレット付近で崩れる(768px~1024px)
具体例を見るのがわかりやすいかと思うので、具体例を出します。
こちらはコンテンツが画面外に飛び出して、横スクロールが起きてしまっている状況です。
タブレット付近とは768px~1024pxの範囲ですが、レスポンシブではここが一番崩れやすい部分になります。
基本的に案件では「PCデザイン」「SPデザイン」の二種類しかなく、「タブレットデザイン」が支給されることはほぼないので、768px~1024pxの範囲はコーダーがよしなにコーディングせざるを得ない場合が多いです。
タブレット付近の確認方法としては、検証ツールの上の方が「Dimensions: Responsive」の状態だと、1px単位でフルレスポンシブで表示確認することができますし、
iPad Mini(768px)、iPad Air(820px)、iPad Pro(1024px)などデバイスサイズ毎に検証することもできるので、タブレット付近はきちんと検証ツールでまめに確認しておきましょう。
そうやってタブレット付近の検証をしていると、よく遭遇するのが先程の横スクロール問題なんですが、皆さんこれどうやって問題の位置を特定してますか？
まさか、要素一個一個を検証ツールで確認してませんよね？
どこが原因で横スクロールが起こっているのか、全くわからん！！
という経験は、みな通る道だと思います。
ここでは秘伝技があるので、それをお教えしようと思います。
検証のConsoleを開いて、こちらの赤枠内のコードをコピペして実行してみてください。
一応コードの解説をすると、JavaScriptで全要素のアウトラインを赤色にしつつ、ページからはみ出ている要素をconsole,logで出力してくれる処理になります。
コードを実行すると、このようにはみ出ている要素が赤枠でわかりやすくなります。
consoleではコピペしたコードの下に、横スクロールの原因と思われる要素が表示されています。
これによって、「どこが原因でレスポンシブ時の横スクロールが起きているか」がすぐに視覚的に分かるようになるので、是非使ってみてください。
コードはこちらに載せておきますが、詳しくは参考記事で解説しているので、そちらも見てみてください。↓
// ウェブページの幅を取得
var w = document.documentElement.clientWidth;
// 全ての要素を取得
var elements = document.querySelectorAll("*");
// 要素をループして、指定の条件を満たすものを探す
elements.forEach(function(v) {
v.style.outline = '1px solid red';
if (w < v.clientWidth) {
console.log(v);
}
});
❷SafariやiPhoneで崩れている
これもめちゃくちゃあるミスです。そもそもこれを見ている方で特にWindowsをお使いの方、きちんとSafari、iPhoneでの表示確認ができていますか？
SafariはIEの次にやっかいなブラウザとしてフロントエンドエンジニアを長年苦しめてきています。
こんな崩れるのか…これは確認しなきゃ！
と思えるわかりやすい例を出します。
こちらは「HTMLタグのみのフォームをMacOS Safari、Chrome、iPhone Safariでそれぞれ表示」したものです。
全然違うのがわかりますか？恐ろしいのは「MacのSafariとiPhoneのSafariでも相当違うこと」です。
よって、MacOS Safariだけでなく、きちんとiPhoneの実機確認も行う必要がありますし、逆にiPhoneだけでMacOS Safariの確認が完璧ともなりません。
iPhoneに関しては、サーバーに上げなくても、ローカル環境で実機の表示確認する方法があって以前ブログで紹介しているので、そちらをご確認下さい。
Windowsしか持っていなくて、Safariの確認ができない方は「SauceLabsのSafari Browser Testing」を使うと、Safari環境の検証ができます。
ただ、二週間経つと有料になってしまうので、Macを持っていない人は現状買うしかないのかなと思っています。
正直この辺はだましだましでWeb制作しているコーダーが多い気がしていて、何か良い解決策があれば、教えていただけると幸いです…
❸中途半端な場所での改行
これはスマホ時によくあるミスになります。
例えばこちらはPCデザインになりますが、これがスマホ表示になった時に
このような位置で改行してしまっている人が多いです。明らかに中途半端な位置で改行してしまっていますね。
でも、これってダメなの？全部の箇所の改行を、どの画面幅でも自然にするのは無理じゃない？
と思われるかもしれませんが、基本的に”見出しなどの目立つ部分”のみでOKです！
具体例を出すと、こちらのデザインの場合は、見出しは意図しない位置での改行はしたくないですが、説明文はどこで改行してもいいです。
デザインでも改行位置を気にしていないので、そう判断できますね。
また、これは特にタブレットで起こりやすいですが、ナビゲーションリンクやボタンテキストなども改行しやすいので、注意したいのと、
パンくずメニューが途中で改行してしまうのもあるあるなので、これも気をつけたいですね。
特にWordPressなどの、テキストが自動生成されるサイトだとパンくずが長くなりやすく、事故率が上がるので、入念に確認するようにしましょう。
❹画像の縦横比が崩れる
こちらの画像を見ていただきたいんですが、スライド内の画像が微妙に歪んでいるのがわかりますか？厳密には縦長になっています。
画像の縦横比が崩れないようにするには、基本的に「obfect-fit」プロパティを活用すれば、はみ出た部分を自動トリミングしてくれるので解決できます。
ただ、ブログ記事のサムネ画像とかだと「画像上の重要な情報が途切れてしまう」リスクはあるので、ここだけ注意ですね。
具体的な部分としては、WordPressサイトの「記事カードデザイン」など、いろんな画像が埋め込まれる場合に縦横比の崩れが起こりやすいので、
実装するときは、納品後にどんな画像が入稿されても縦横比が崩れないようにしておきたいですね。
❺フォント周りのミス
フォント関連のミスはめちゃくちゃ多くてプロパティも多いので「フォント周り」と一括りにしていますが、
フォント周りのミスって、具体的にどこだろう？
と思われると思います。具体的なプロパティを上げていくと、
- font-family
- font-size
- font-weight
- line-height
- letter-spacing
- color
このあたりですね。フォントに関わるほぼ全てです笑
具体的な事例を見ていこうと思います。例えばこちらのデザインを見てほしいんですが、
これをコーディングしたものとデザインを、拡張機能「PerfectPixel」で合わせて見てみると、結構ずれているのが分かるかと思います。
これって何が原因でズレていると思いますか？
こちらで色々原因を調査してみた結果、
- 上下の余白が1px異なる
- font-size16pxのはずが14pxになっている
- font-weightが未設定で太字になっていない
- letter-spacingがデフォルトのままになっている
こういったことがわかったので、一つ一つ修正した結果ほとんどデザイン通りにすることができました。
う〜ん、でもこんな初歩的なミスをする人がいるんですかねぇ？
と正直思いませんでしたか？私はもちろん、あなたも絶対にどこかでデザインと異なる指定をしているはずです。
最後に解説しますが、拡張機能「PerfectPixel」を使う癖がない人ほどフォント周りが適当になりやすいので、絶対毎回使うようにしてください。
❻レスポンシブでフォントサイズが小さくなりすぎる
フォントサイズをremやvwなどでレスポンシブで自動で変わるようにしている人に起こりがちなのが、
タブレット、スマホ時のテキストサイズが小さくなりすぎる
という現象です。例えばこちらを見てほしいんですが、赤枠内のフォントサイズの大きさに注目してください。
フォントサイズが10pxになっていると、かなり文章が読みにくくなるのが分かるかと思います。
ほとんどの人はスマホで閲覧すると思いますが、老眼の人はズームしないと、読解はほぼ不可能な領域です。
こういった現象を起こしてしまっている人のほとんどが、
別に10pxだなんて設定してないんですが、なんでこんな小さくなってたんだろう？気づかなかった…
という状況だったりします。remやvwを使うにしても、「フォントサイズは12px以下にならないようにする」という処理を入れる必要があるかと思います。
PCデザインの時にフォントが巨大化するのも防がないといけないので、vwを使う場合ならclamp()関数などを使う必要があると思います。
font-size: clamp(12px, 2.5vw, 50px);❼検証のconsoleにエラーが出ている
これを気にしたことがなかった人は、是非今すぐ「品質管理シート」に項目追記してほしいんですが、
検証ツールの「Console」の部分に何もエラーが出ていない状態を納品時は目指すべきですね。例えばこのような状態はNGになります。エラー出まくりですね笑
よく見かけるエラーとしては、
- 自分で書いたJavaScript関連のエラー
- CSS関連のエラー
- headで読み込んでいるリソースがhttpになっている
- ブラウザの拡張機能のJavaScript起因のエラー
こういったものが多い印象ですね。読み込んだライブラリや自分で書いたJavaScriptが動かないときは特にここを見てほしくて、例えば
静的サイトのときは動いてたjQueryが、WordPressにしたら何故か動かなくなった！
と言う場合は、大体Consoleにエラーが出ている場合が多いです。この場合はjQueryで使われる$が機能していないことを示していますね。
注意点として、ブラウザの拡張機能関連のエラーが出ることもあるので、検証のConsoleは「シークレットウィンドウ」で確認するようにしましょう。
❽リンク切れ
リンク切れは特にWordPressなどの大量のページが存在する時に起こりやすいです。
例えばこちらのキーエンスのサイトを見てほしんですが、この画像内だけでも大量にリンクが設置されています。
ヘッダーにあるナビゲーションはメガメニューになっていて、キーエンスが抱える大量の製品を見つけやすい設計になっています。
こんなにリンクがあったら、正直リンクが機能しているか確認するのってめちゃくちゃ大変じゃないですか？
これはその通りで、実際の案件でここまで製品数が多い制作案件はほとんどないですが、まあどんなサイトでも、実際に全部自分でリンクを押して確認するのは大変です。
私がリンク切れの確認時に使用しているツールでいうと、まず「Link Checker」があります。
BASIC認証下でもリンク切れが確認できるので便利なんですが、1ページずつしか調べられないので、ページ数が大量にあるときは大変かもしれないです。
既に公開されているサイトだったら、dead-link-checkerがめちゃくちゃ便利です。
サイトのURLを入力するだけで、サイトのリンク切れを横断的に調べてくれるので、サイト公開後に確認できる場合は、こちらの方がいいかなと思います。
サイトの品質管理業務に取り入れてみてください。
❾BASIC認証がかかっていない
これはスクール課題などで初学者にありがちなミスですが、htaccessを置くディレクトリが間違っていてBASIC認証が正しくかかっていない場合があります。
実務の場合はテスト環境などに認証をかけることが多いですが、認証がかかっていなくてheadにnoindexも無い場合だと、検索一覧に出てきてしまうので、
開発中は、ちゃんとBASIC認証がかかっているかは気にしたい所です。
ちなみに、BASIC認証もシークレットウィンドウで確認することをおすすめします。
❿titleとdescriptionが仕様どおりになっていない
下請けの案件に多いんですが、デザイン・コーディングより前の要件定義の段階で「ページ構成」と同時に「title、description」を決めていることが多く、
そのとおりにコーディングする必要があります。
トップページの際は「サイト名」、下層ページの際は「ページ名｜サイト名」にすることが一番多いと思います。
試しに私のサイトを見てみると、トップページはこのように設定していて、
下層ページではこのように「ページ名｜サイト名」で表示させています。
WordPressだったら、add_theme_support(‘title-tag’);をfunctions.phpに入れればtitleは自動出力されますが、
制作会社案件だと多くの場合スプレッドシートで、各ページごとのmeta情報が厳密に指定されていることが多いので、仕様どおりの設定を忘れないようにしたいですね！
⑪OGP、favicon設定が抜けている
OGPは、SNSなどでサイトをシェアした時にこんな感じでカード形式で表示してくれる機能です。最近はXの仕様改定でサムネ画像だけになりました。
ファビコンはサイトの顔とも言えるアイコンです。サイトを開いたときのタブに画像が表示されますが、これがfaviconですね。
OGPとファビコンは設定を忘れている人がめちゃくちゃ多くて、実際の制作案件でも設定されないまま公開されちゃってるサイトも多々あるぐらい見逃しやすい項目です。
スクールのコーディング課題でも、OGPやファビコンの指定が無いことが多いので、スクール課題でも見逃されやすい部分です。
まずOGPに関しては、静的サイトの場合はheadにこのようなコードを書く必要があります。これでXやfacebookのOGPに対応することができます。
<!-- headタグの記述 -->
<head prefix="og: https://ogp.me/ns#">
<!-- ここからmetaタグの記述 -->
<meta property="og:url" content=" ページのURL" />
<meta property="og:type" content=" ページの種類" />
<meta property="og:title" content=" ページのタイトル" />
<meta property="og:description" content=" ページの説明文" />
<meta property="og:site_name" content="サイト名" />
<meta property="og:image" content=" サムネイル画像のURL" />
<!-- ここからTwitterカードの記述 -->
<meta name="twitter:card" content="Twitterカードの種類" />
<meta name="twitter:site" content="@Twitterユーザー名" />
<!-- ここからFacebookカードの記述 -->
<meta property="fb:app_id" content="FacebookアプリID" />
うわ、めちゃくちゃ長いな…こんなの覚えられないよ…
と思われるかもしれませんが、私もこんな長いのは覚えていません笑
大体の人は自前のスニペットでコピペしていると思いますので、すぐ呼び出せるようにVSCodeのユーザースニペットに登録しておくといいかと思います。
また、WordPressの場合だったら、「SEO SIMPLE PACK」というプラグインを使えば簡単に設定できるので、こちらを使うのをおすすめします。
OGPが当たっているかどうかは「ラッコOGP確認ツール」を使えば一目瞭然なので、こちらを使うと良いかと思います。
OGPの詳しい設定に関して詳しくは記事にまとめてますので、こちらを見てみてください。
次にファビコンですね。ファビコンは様々なデバイスに対応するため、本当は20種類以上のサイズの画像を準備しなきゃいけないんですが、
実際は「48×48pxのPNG画像を「1つ」」準備して、headにこちらのコードを加えれば、どの環境でも大体は綺麗に表示されます。
<link rel="icon" href="/icon.png"> <!-- 48x48px -->WordPressの場合だったら、「カスタマイズ」画面からNoCodeで簡単にファビコンの設定ができるので、コーディング不要で設定できます。
ファビコンの素材の作成方法から配置まではこちらの記事に詳細を記載しているので、参考にしてみてください。
でも、OGPとファビコンに関して、素材も仕様も先方から指示されてないんですが、その場合はどうすればいいんですか？
こういう場合には、大抵はただ単純に先方が忘れているだけなので、まずきちんと相談をした上で素材を貰うのがいいかと思います。
もし「よしなに準備してほしい」という場合、特にスクールの課題などで何も指示がない場合は、
サイトの雰囲気に合ったアイコンを、「ICOOON MONO」などのアイコン配布サイトからダウンロードして利用するのが良いかと思います。
コーディングに関するミス
一応「環境による」と念押ししておきますが、Web制作の案件に関しては、コードに関して細かく指摘を受けることは実はそれほど多くないです。
すごく言葉を選ばずにいうと、「正常に表示されていたらとりあえずOK」の雰囲気は、システム開発以上にあると思います。
なので、表示や見た目に関する指摘よりはコーディングの方が少なめにはなっています。一番見られるのは「HTMLタグの使い方」の部分になりますね。
❶hタグによる見出し階層や使い所が適当
適切なhタグを使うことは、Googleのクローラーが正しくWebページの構造を解析できて、SEO上の効果があるものなので、呼吸をするようにできてほしいコーディングの基礎技術です。
CSSと違って瞬時に良い悪いが分かりやすいのもあって、hタグの使い方が適当だと、かなり目立ちます。
でも、hタグの見出し階層を正しくするなんて、基礎中の基礎では？
と思うなかれ！hタグの使い所は意外に奥深いです。
例えばこちらは有名な比較サイトの「mybest」というサイトのトップページになりますが、ロゴ部分がh1になっていて、ファーストビューの次のセクションの見出しがh2になっています。
そして、記事ページに行くとロゴ部分はh1→divになり、記事タイトル部分がh1になります。
h1の役割は「表示しているページの内容を端的に表したもの」であると考えると、こうなるのも自然であると分かると思います。
逆に「明らかに見出しだと思われる部分も全部divで実装してしまう人」もまれにいるので、そういう人はすぐにコードを直すべきだと思います。
❷セクショニング・コンテンツが使われていない
ほとんどのHTMLタグは何らかのコンテンツカテゴリーに属していて、例えばbodyタグの中のタグはほとんどは「フロー・コンテンツ」というカテゴリーに属しています。
この中で盲点になりやすいのが、「セクショニング・コンテンツ」になります。文章のまとまりを定義するカテゴリーになっていて、
- article
- aside
- nav
- section
この四種類が存在しています。一つ一つ解説していきます。
セクショニング・コンテンツのタグ解説
article要素は、そのセクションだけで独立した内容となっているセクションを示すための要素で、分かりやすい例だと記事カードなどは、カードで一つ独立した内容になっているので、articleで囲むことが多いです。
aside要素は、ページのメインコンテンツには含まれないと考えられるセクションを示すための要素で、サイドバーや広告枠などはasideで囲むことが多いですね。
nav要素は、ナビゲーション部分のセクションを示すための要素で、基本的に”主要なナビゲーションにのみ”用います。大体はヘッダーのグローバルナビゲーションに用いますね。
その場合は、フッターのナビゲーションリンクにはnavタグを用いないのが原則です。
section要素は一番カンタンで、LPが分かりやすいと思いますが、人まとまりのブロックをsectionタグにしていくイメージです。
ただ注意点として、sectionタグ配下には見出しのhタグを入れることが推奨されているので、必ず入れるようにします。
セクショニング・コンテンツのケーススタディー
ここまでの見出しとセクショニング・コンテンツの復習をするために、軽くケーススタディーをしていこうと思います。
例えばこちらのページのhタグとセクショニング・コンテンツがどうなっているのか、ちょっと考えてみてください。
h1とh2はどこにあって、navタグはどこで、articleタグはどこにあると思いますか？
答えはこんな感じになっています。
h2になっている所は記事が所属しているカテゴリー名で、階層的に記事より上位の枠なので、カテゴリー名がh2、記事タイトルがh3になっていますね。
他にもいくつか事例を見ていこうと思います。
こちらは同じメディアの記事一覧ページで一階層下がったんですが、ロゴはh1→divタグになって、サイドバーにはasideタグ、カテゴリー名がh1になっていて、記事カードのタイトルがh2になっています。
記事詳細ページでは、記事タイトルがh1になって、記事中の見出しがh2になっていました。
最後に私が出しているコーディング演習課題の上級編のデザインを見てみようと思いますが、私ならこのようにコーディングするかと思います。
記事本文の部分をarticleで囲むかは諸説ある部分かもしれませんが、少なくとも情報のひと塊であるとみなすことはできるかなと思っています。
最後に注意点が一つあって、それはセクショニング・コンテンツは「これが正解！！これが間違い！！」とひとくくりにするのは難しいということです。
ただ、HTMLタグはCSS以上に目に付きやすく、流石に一面divタグしかないと突っ込まれる可能性はあります。
今回をきっかけに、適切なHTMLタグの使い方にも目を向けてもらえればと思います。
コーディングチェックツールを使うことで、コーディングエラーの見逃しを防ぐことができます。
是非こちらのツールの導入も進めてください。
損害賠償になりかねないミス
一個だけ紹介しようと思います。
フォーム送信や決済完了してもメールが届かない
メール関連の不備はダイレクトに売上に影響することが多いので、損害賠償などに繋がりやすい部分で慎重に制作する必要があります。
どういうことだろ？フォームのメール設定が間違ってたのかな？
と多くの方は思うかもしれませんが、それもあります。
なので、WordPressでContact Form 7などで納品する前に、フォームが機能しているかちゃんと確認してほしいんですが、今回話すのはもう少しトリッキーな部分です。
お問い合わせフォームの設定を行う時に、お客さんのメールアドレスを設定しますよね？その際に、
お客さんのメールアドレスがGmailだと、サーバーにスパム判定されてメールが送信されないことがある
ということです。
このリスクを下げるために取れる方法は２つで、
- 信頼性の高いSMTPサーバーから送信する
- サイトドメインと同じメールアドレスを設定する
このどちらかの対応が必要になります。
WordPressサイトのお問い合わせフォームの場合だったら、「WP Mail SMTP」というプラグインを使えばOKで、使い方はブログ記事にまとめています。
また、WordPressではない環境の場合は、素直にサイトドメインと同じメアドを取得しておくのがいいかと思います。
例えば私のブログはshogo-log.comなので、xxxxx@shogo-log.comというのがメールアドレスですね。
大体サーバーを契約する際にメアドも取得できるはずなので、それを使うといいですね。
私がフリーランスや中小事業者にコスパ最強としておすすめしている、エックスサーバー社の「シン・レンタルサーバー 
」でも簡単にメールアドレスを取得できるので、
まだメアドを取得していない人は参考記事を貼っておくので、試してみてください。
さいごに
今回は「見た目や機能に関するミス」と「コーディングに関するミス」「損害賠償になりかねないミス」の3点を解説させていただきました。
まとめると、
- タブレット付近で崩れる
- Safari、iPhoneで崩れている
- 中途半端な場所での改行
- 画像の縦横比が崩れる
- フォント周りのミス
- レスポンシブでフォントサイズが小さくなる
- 検証のconsoleにエラーが出ている
- リンク切れ
- BASIC認証が効いていない
- title、descriptionが仕様通りになっていない
- OGP、faviconが未設定
- hタグによる見出し階層や使い所が適当
- セクショニング・コンテンツが使われていない
- フォーム送信や決済完了してもメールが届かない
このようになります。これらは実案件でもよく修正が起こる部分ではありますし、スクールの課題をレビューしていても、とても頻繁に修正依頼を出している項目になりますので、
これを見たからには、ぜひ避けていただきたいミスになります。
特に「見た目」に関するミスがダントツで一番多いですが、これは基本的に拡張機能「PerfectPixel」を使用すれば避けられるミスになります。
具体的にどういうふうに使えばいいんだろう、全部デザイン通りに完璧にしないといけないのかな？
このあたり疑問への答えは記事にまとめてますので、こちらを参照いただければと思います。
また、コーディング関連に関してはコーディングチェックツールを導入することで基本的なミスは防げます。以下の記事でツールの導入と使い方も押さえておくといいですね。
もし、
プロに、自分のコーディングにミスが無いか確認してほしい
という場合でしたら、私の出しているコーディング演習課題では私が直接レビューをしているので、こちらも合わせてご検討いただければと思います。
今回が、皆さんのミスを未然に防ぐための教科書的な内容になれば幸いです。
HTML初心者からWordPress実案件レベルまでのコーディング演習課題を「専用ページ」にて公開しています。
- Figma,Photoshopデザインからのコーディング
- サーバーアップロードでサイト公開
- プロによる最大3回の表示確認特典
- レビュー返しは爆速
- 2024年にデザイン刷新！被らないポートフォリオ
「初級編」は初めてデザインからコーディングする方向け
「中級編」はJavaScriptやjQueryの練習
「上級編」はWordPressの実案件を模擬体験できるレベル感にしています。
中級者の方には高難易度課題を詰め合わせた「即戦力セット」も出しています。
全課題で「実務レベルの、プロの厳しいレビュー」を受けられるようにしています。
また、2024年には随時デザインの刷新をしており、完全リニューアル！！
他者と差をつけられるポートフォリオが準備できます！
制作会社も使用する専用レビューツールで分かりやすく添削していきます！
基本的に「まとめて購入」していただくとかなりお得になります↓
コーディングは書籍だけではなかなか実力がつかないので、実務レベルのレビューを受けて自身をつけたい人は是非挑戦してみてください！
＼課題の購入はこちらから／
ご寄付を頂けると今後の更新の励みになります！
