未経験からWebデザイナーへ！【2025年版】

<!DOCTYPE html> <html lang="ja"> <head> <meta charset="utf-8"> <meta name="viewport" content="width=device-width,initial-scale=1"> <meta name="thumbnail" content="https://webdesigner-go.com/wp-content/themes/webdesigner/img/serp-img.jpg" /> <title>未経験からWebデザイナーへ！【2025年版】</title> <meta name='robots' content='max-image-preview:large' /> <style>img:is([sizes="auto" i], [sizes^="auto," i]) { contain-intrinsic-size: 3000px 1500px }</style>  <meta name="description" content="Webデザイナーになれる最短の方法を紹介！Web業界未経験でも大丈夫！さらに実際の現場で使われているテクニックやノウハウも惜しみなく解説します。"> <link rel="canonical" href="https://webdesigner-go.com/"> <meta property="og:locale" content="ja_JP"> <meta property="og:type" content="website"> <meta property="og:image" content="https://webdesigner-go.com/wp-content/uploads/2024/03/ogp.png"> <meta property="og:title" content="未経験からWebデザイナーへ！【2025年版】"> <meta property="og:description" content="Webデザイナーになれる最短の方法を紹介！Web業界未経験でも大丈夫！さらに実際の現場で使われているテクニックやノウハウも惜しみなく解説します。"> <meta property="og:url" content="https://webdesigner-go.com/"> <meta property="og:site_name" content="未経験からWebデザイナーへ！【2025年版】"> <meta name="twitter:card" content="summary"> <meta name="twitter:site" content="webdesigner_go">  <link rel='stylesheet' id='wp-block-library-css' href='https://webdesigner-go.com/wp-includes/css/dist/block-library/style.min.css' type='text/css' media='all' /> <style id='classic-theme-styles-inline-css' type='text/css'> /*! This file is auto-generated */ .wp-block-button__link{color:#fff;background-color:#32373c;border-radius:9999px;box-shadow:none;text-decoration:none;padding:calc(.667em + 2px) calc(1.333em + 2px);font-size:1.125em}.wp-block-file__button{background:#32373c;color:#fff;text-decoration:none} </style> <style id='global-styles-inline-css' type='text/css'> :root{--wp--preset--aspect-ratio--square: 1;--wp--preset--aspect-ratio--4-3: 4/3;--wp--preset--aspect-ratio--3-4: 3/4;--wp--preset--aspect-ratio--3-2: 3/2;--wp--preset--aspect-ratio--2-3: 2/3;--wp--preset--aspect-ratio--16-9: 16/9;--wp--preset--aspect-ratio--9-16: 9/16;--wp--preset--color--black: #000000;--wp--preset--color--cyan-bluish-gray: #abb8c3;--wp--preset--color--white: #ffffff;--wp--preset--color--pale-pink: #f78da7;--wp--preset--color--vivid-red: #cf2e2e;--wp--preset--color--luminous-vivid-orange: #ff6900;--wp--preset--color--luminous-vivid-amber: #fcb900;--wp--preset--color--light-green-cyan: #7bdcb5;--wp--preset--color--vivid-green-cyan: #00d084;--wp--preset--color--pale-cyan-blue: #8ed1fc;--wp--preset--color--vivid-cyan-blue: #0693e3;--wp--preset--color--vivid-purple: #9b51e0;--wp--preset--gradient--vivid-cyan-blue-to-vivid-purple: linear-gradient(135deg,rgba(6,147,227,1) 0%,rgb(155,81,224) 100%);--wp--preset--gradient--light-green-cyan-to-vivid-green-cyan: linear-gradient(135deg,rgb(122,220,180) 0%,rgb(0,208,130) 100%);--wp--preset--gradient--luminous-vivid-amber-to-luminous-vivid-orange: linear-gradient(135deg,rgba(252,185,0,1) 0%,rgba(255,105,0,1) 100%);--wp--preset--gradient--luminous-vivid-orange-to-vivid-red: linear-gradient(135deg,rgba(255,105,0,1) 0%,rgb(207,46,46) 100%);--wp--preset--gradient--very-light-gray-to-cyan-bluish-gray: linear-gradient(135deg,rgb(238,238,238) 0%,rgb(169,184,195) 100%);--wp--preset--gradient--cool-to-warm-spectrum: linear-gradient(135deg,rgb(74,234,220) 0%,rgb(151,120,209) 20%,rgb(207,42,186) 40%,rgb(238,44,130) 60%,rgb(251,105,98) 80%,rgb(254,248,76) 100%);--wp--preset--gradient--blush-light-purple: linear-gradient(135deg,rgb(255,206,236) 0%,rgb(152,150,240) 100%);--wp--preset--gradient--blush-bordeaux: linear-gradient(135deg,rgb(254,205,165) 0%,rgb(254,45,45) 50%,rgb(107,0,62) 100%);--wp--preset--gradient--luminous-dusk: linear-gradient(135deg,rgb(255,203,112) 0%,rgb(199,81,192) 50%,rgb(65,88,208) 100%);--wp--preset--gradient--pale-ocean: linear-gradient(135deg,rgb(255,245,203) 0%,rgb(182,227,212) 50%,rgb(51,167,181) 100%);--wp--preset--gradient--electric-grass: linear-gradient(135deg,rgb(202,248,128) 0%,rgb(113,206,126) 100%);--wp--preset--gradient--midnight: linear-gradient(135deg,rgb(2,3,129) 0%,rgb(40,116,252) 100%);--wp--preset--font-size--small: 13px;--wp--preset--font-size--medium: 20px;--wp--preset--font-size--large: 36px;--wp--preset--font-size--x-large: 42px;--wp--preset--spacing--20: 0.44rem;--wp--preset--spacing--30: 0.67rem;--wp--preset--spacing--40: 1rem;--wp--preset--spacing--50: 1.5rem;--wp--preset--spacing--60: 2.25rem;--wp--preset--spacing--70: 3.38rem;--wp--preset--spacing--80: 5.06rem;--wp--preset--shadow--natural: 6px 6px 9px rgba(0, 0, 0, 0.2);--wp--preset--shadow--deep: 12px 12px 50px rgba(0, 0, 0, 0.4);--wp--preset--shadow--sharp: 6px 6px 0px rgba(0, 0, 0, 0.2);--wp--preset--shadow--outlined: 6px 6px 0px -3px rgba(255, 255, 255, 1), 6px 6px rgba(0, 0, 0, 1);--wp--preset--shadow--crisp: 6px 6px 0px rgba(0, 0, 0, 1);}:where(.is-layout-flex){gap: 0.5em;}:where(.is-layout-grid){gap: 0.5em;}body .is-layout-flex{display: flex;}.is-layout-flex{flex-wrap: wrap;align-items: center;}.is-layout-flex > :is(*, div){margin: 0;}body .is-layout-grid{display: grid;}.is-layout-grid > :is(*, div){margin: 0;}:where(.wp-block-columns.is-layout-flex){gap: 2em;}:where(.wp-block-columns.is-layout-grid){gap: 2em;}:where(.wp-block-post-template.is-layout-flex){gap: 1.25em;}:where(.wp-block-post-template.is-layout-grid){gap: 1.25em;}.has-black-color{color: var(--wp--preset--color--black) !important;}.has-cyan-bluish-gray-color{color: var(--wp--preset--color--cyan-bluish-gray) !important;}.has-white-color{color: var(--wp--preset--color--white) !important;}.has-pale-pink-color{color: var(--wp--preset--color--pale-pink) !important;}.has-vivid-red-color{color: var(--wp--preset--color--vivid-red) !important;}.has-luminous-vivid-orange-color{color: var(--wp--preset--color--luminous-vivid-orange) !important;}.has-luminous-vivid-amber-color{color: var(--wp--preset--color--luminous-vivid-amber) !important;}.has-light-green-cyan-color{color: var(--wp--preset--color--light-green-cyan) !important;}.has-vivid-green-cyan-color{color: var(--wp--preset--color--vivid-green-cyan) !important;}.has-pale-cyan-blue-color{color: var(--wp--preset--color--pale-cyan-blue) !important;}.has-vivid-cyan-blue-color{color: var(--wp--preset--color--vivid-cyan-blue) !important;}.has-vivid-purple-color{color: var(--wp--preset--color--vivid-purple) !important;}.has-black-background-color{background-color: var(--wp--preset--color--black) !important;}.has-cyan-bluish-gray-background-color{background-color: var(--wp--preset--color--cyan-bluish-gray) !important;}.has-white-background-color{background-color: var(--wp--preset--color--white) !important;}.has-pale-pink-background-color{background-color: var(--wp--preset--color--pale-pink) !important;}.has-vivid-red-background-color{background-color: var(--wp--preset--color--vivid-red) !important;}.has-luminous-vivid-orange-background-color{background-color: var(--wp--preset--color--luminous-vivid-orange) !important;}.has-luminous-vivid-amber-background-color{background-color: var(--wp--preset--color--luminous-vivid-amber) !important;}.has-light-green-cyan-background-color{background-color: var(--wp--preset--color--light-green-cyan) !important;}.has-vivid-green-cyan-background-color{background-color: var(--wp--preset--color--vivid-green-cyan) !important;}.has-pale-cyan-blue-background-color{background-color: var(--wp--preset--color--pale-cyan-blue) !important;}.has-vivid-cyan-blue-background-color{background-color: var(--wp--preset--color--vivid-cyan-blue) !important;}.has-vivid-purple-background-color{background-color: var(--wp--preset--color--vivid-purple) !important;}.has-black-border-color{border-color: var(--wp--preset--color--black) !important;}.has-cyan-bluish-gray-border-color{border-color: var(--wp--preset--color--cyan-bluish-gray) !important;}.has-white-border-color{border-color: var(--wp--preset--color--white) !important;}.has-pale-pink-border-color{border-color: var(--wp--preset--color--pale-pink) !important;}.has-vivid-red-border-color{border-color: var(--wp--preset--color--vivid-red) !important;}.has-luminous-vivid-orange-border-color{border-color: var(--wp--preset--color--luminous-vivid-orange) !important;}.has-luminous-vivid-amber-border-color{border-color: var(--wp--preset--color--luminous-vivid-amber) !important;}.has-light-green-cyan-border-color{border-color: var(--wp--preset--color--light-green-cyan) !important;}.has-vivid-green-cyan-border-color{border-color: var(--wp--preset--color--vivid-green-cyan) !important;}.has-pale-cyan-blue-border-color{border-color: var(--wp--preset--color--pale-cyan-blue) !important;}.has-vivid-cyan-blue-border-color{border-color: var(--wp--preset--color--vivid-cyan-blue) !important;}.has-vivid-purple-border-color{border-color: var(--wp--preset--color--vivid-purple) !important;}.has-vivid-cyan-blue-to-vivid-purple-gradient-background{background: var(--wp--preset--gradient--vivid-cyan-blue-to-vivid-purple) !important;}.has-light-green-cyan-to-vivid-green-cyan-gradient-background{background: var(--wp--preset--gradient--light-green-cyan-to-vivid-green-cyan) !important;}.has-luminous-vivid-amber-to-luminous-vivid-orange-gradient-background{background: var(--wp--preset--gradient--luminous-vivid-amber-to-luminous-vivid-orange) !important;}.has-luminous-vivid-orange-to-vivid-red-gradient-background{background: var(--wp--preset--gradient--luminous-vivid-orange-to-vivid-red) !important;}.has-very-light-gray-to-cyan-bluish-gray-gradient-background{background: var(--wp--preset--gradient--very-light-gray-to-cyan-bluish-gray) !important;}.has-cool-to-warm-spectrum-gradient-background{background: var(--wp--preset--gradient--cool-to-warm-spectrum) !important;}.has-blush-light-purple-gradient-background{background: var(--wp--preset--gradient--blush-light-purple) !important;}.has-blush-bordeaux-gradient-background{background: var(--wp--preset--gradient--blush-bordeaux) !important;}.has-luminous-dusk-gradient-background{background: var(--wp--preset--gradient--luminous-dusk) !important;}.has-pale-ocean-gradient-background{background: var(--wp--preset--gradient--pale-ocean) !important;}.has-electric-grass-gradient-background{background: var(--wp--preset--gradient--electric-grass) !important;}.has-midnight-gradient-background{background: var(--wp--preset--gradient--midnight) !important;}.has-small-font-size{font-size: var(--wp--preset--font-size--small) !important;}.has-medium-font-size{font-size: var(--wp--preset--font-size--medium) !important;}.has-large-font-size{font-size: var(--wp--preset--font-size--large) !important;}.has-x-large-font-size{font-size: var(--wp--preset--font-size--x-large) !important;} :where(.wp-block-post-template.is-layout-flex){gap: 1.25em;}:where(.wp-block-post-template.is-layout-grid){gap: 1.25em;} :where(.wp-block-columns.is-layout-flex){gap: 2em;}:where(.wp-block-columns.is-layout-grid){gap: 2em;} :root :where(.wp-block-pullquote){font-size: 1.5em;line-height: 1.6;} </style> <link rel='stylesheet' id='better-recent-comments-css' href='https://webdesigner-go.com/wp-content/plugins/better-recent-comments/assets/css/better-recent-comments.min.css' type='text/css' media='all' /> <link rel='stylesheet' id='contact-form-7-css' href='https://webdesigner-go.com/wp-content/plugins/contact-form-7/includes/css/styles.css?ver=6.0.4' type='text/css' media='all' /> <link rel='stylesheet' id='wpdm-fonticon-css' href='https://webdesigner-go.com/wp-content/plugins/download-manager/assets/wpdm-iconfont/css/wpdm-icons.css' type='text/css' media='all' /> <link rel='stylesheet' id='wpdm-front-css' href='https://webdesigner-go.com/wp-content/plugins/download-manager/assets/css/front.min.css' type='text/css' media='all' /> <link rel='stylesheet' id='flexible-table-block-css' href='https://webdesigner-go.com/wp-content/plugins/flexible-table-block/build/style-index.css?ver=1729614381' type='text/css' media='all' /> <style id='flexible-table-block-inline-css' type='text/css'> .wp-block-flexible-table-block-table.wp-block-flexible-table-block-table>table{width:100%;max-width:100%;border-collapse:collapse;}.wp-block-flexible-table-block-table.wp-block-flexible-table-block-table.is-style-stripes tbody tr:nth-child(odd) th{background-color:#f0f0f1;}.wp-block-flexible-table-block-table.wp-block-flexible-table-block-table.is-style-stripes tbody tr:nth-child(odd) td{background-color:#f0f0f1;}.wp-block-flexible-table-block-table.wp-block-flexible-table-block-table.is-style-stripes tbody tr:nth-child(even) th{background-color:#ffffff;}.wp-block-flexible-table-block-table.wp-block-flexible-table-block-table.is-style-stripes tbody tr:nth-child(even) td{background-color:#ffffff;}.wp-block-flexible-table-block-table.wp-block-flexible-table-block-table>table tr th,.wp-block-flexible-table-block-table.wp-block-flexible-table-block-table>table tr td{padding:1em;border-width:1px;border-style:solid;border-color:#cccccc;text-align:left;vertical-align:middle;}.wp-block-flexible-table-block-table.wp-block-flexible-table-block-table>table tr th{background-color:#e3e6e8;}.wp-block-flexible-table-block-table.wp-block-flexible-table-block-table>table tr td{background-color:#ffffff;}@media screen and (min-width:769px){.wp-block-flexible-table-block-table.is-scroll-on-pc{overflow-x:scroll;}.wp-block-flexible-table-block-table.is-scroll-on-pc table{max-width:none;align-self:self-start;}}@media screen and (max-width:768px){.wp-block-flexible-table-block-table.is-scroll-on-mobile{overflow-x:scroll;}.wp-block-flexible-table-block-table.is-scroll-on-mobile table{max-width:none;align-self:self-start;}.wp-block-flexible-table-block-table table.is-stacked-on-mobile th,.wp-block-flexible-table-block-table table.is-stacked-on-mobile td{width:100%!important;display:block;}} </style> <link rel='stylesheet' id='stripe-handler-ng-style-css' href='https://webdesigner-go.com/wp-content/plugins/stripe-payments/public/assets/css/public.css?ver=2.0.90' type='text/css' media='all' /> <link rel='stylesheet' id='toc-screen-css' href='https://webdesigner-go.com/wp-content/plugins/table-of-contents-plus/screen.min.css?ver=2411.1' type='text/css' media='all' /> <link rel='stylesheet' id='destyle-css' href='https://webdesigner-go.com/wp-content/themes/webdesigner/css/destyle.css' type='text/css' media='all' /> <link rel='stylesheet' id='style-css' href='https://webdesigner-go.com/wp-content/themes/webdesigner/style.css?ver=1711172684' type='text/css' media='all' /> <link rel='stylesheet' id='pochipp-front-css' href='https://webdesigner-go.com/wp-content/plugins/pochipp/dist/css/style.css?ver=1.16.0' type='text/css' media='all' /> <link rel='stylesheet' id='bfa-font-awesome-css' href='https://use.fontawesome.com/releases/v5.15.4/css/all.css?ver=2.0.3' type='text/css' media='all' /> <link rel='stylesheet' id='bfa-font-awesome-v4-shim-css' href='https://use.fontawesome.com/releases/v5.15.4/css/v4-shims.css?ver=2.0.3' type='text/css' media='all' /> <style id='bfa-font-awesome-v4-shim-inline-css' type='text/css'> @font-face { font-family: 'FontAwesome'; src: url('https://use.fontawesome.com/releases/v5.15.4/webfonts/fa-brands-400.eot'), url('https://use.fontawesome.com/releases/v5.15.4/webfonts/fa-brands-400.eot?#iefix') format('embedded-opentype'), url('https://use.fontawesome.com/releases/v5.15.4/webfonts/fa-brands-400.woff2') format('woff2'), url('https://use.fontawesome.com/releases/v5.15.4/webfonts/fa-brands-400.woff') format('woff'), url('https://use.fontawesome.com/releases/v5.15.4/webfonts/fa-brands-400.ttf') format('truetype'), url('https://use.fontawesome.com/releases/v5.15.4/webfonts/fa-brands-400.svg#fontawesome') format('svg'); } @font-face { font-family: 'FontAwesome'; src: url('https://use.fontawesome.com/releases/v5.15.4/webfonts/fa-solid-900.eot'), url('https://use.fontawesome.com/releases/v5.15.4/webfonts/fa-solid-900.eot?#iefix') format('embedded-opentype'), url('https://use.fontawesome.com/releases/v5.15.4/webfonts/fa-solid-900.woff2') format('woff2'), url('https://use.fontawesome.com/releases/v5.15.4/webfonts/fa-solid-900.woff') format('woff'), url('https://use.fontawesome.com/releases/v5.15.4/webfonts/fa-solid-900.ttf') format('truetype'), url('https://use.fontawesome.com/releases/v5.15.4/webfonts/fa-solid-900.svg#fontawesome') format('svg'); } @font-face { font-family: 'FontAwesome'; src: url('https://use.fontawesome.com/releases/v5.15.4/webfonts/fa-regular-400.eot'), url('https://use.fontawesome.com/releases/v5.15.4/webfonts/fa-regular-400.eot?#iefix') format('embedded-opentype'), url('https://use.fontawesome.com/releases/v5.15.4/webfonts/fa-regular-400.woff2') format('woff2'), url('https://use.fontawesome.com/releases/v5.15.4/webfonts/fa-regular-400.woff') format('woff'), url('https://use.fontawesome.com/releases/v5.15.4/webfonts/fa-regular-400.ttf') format('truetype'), url('https://use.fontawesome.com/releases/v5.15.4/webfonts/fa-regular-400.svg#fontawesome') format('svg'); unicode-range: U+F004-F005,U+F007,U+F017,U+F022,U+F024,U+F02E,U+F03E,U+F044,U+F057-F059,U+F06E,U+F070,U+F075,U+F07B-F07C,U+F080,U+F086,U+F089,U+F094,U+F09D,U+F0A0,U+F0A4-F0A7,U+F0C5,U+F0C7-F0C8,U+F0E0,U+F0EB,U+F0F3,U+F0F8,U+F0FE,U+F111,U+F118-F11A,U+F11C,U+F133,U+F144,U+F146,U+F14A,U+F14D-F14E,U+F150-F152,U+F15B-F15C,U+F164-F165,U+F185-F186,U+F191-F192,U+F1AD,U+F1C1-F1C9,U+F1CD,U+F1D8,U+F1E3,U+F1EA,U+F1F6,U+F1F9,U+F20A,U+F247-F249,U+F24D,U+F254-F25B,U+F25D,U+F267,U+F271-F274,U+F279,U+F28B,U+F28D,U+F2B5-F2B6,U+F2B9,U+F2BB,U+F2BD,U+F2C1-F2C2,U+F2D0,U+F2D2,U+F2DC,U+F2ED,U+F328,U+F358-F35B,U+F3A5,U+F3D1,U+F410,U+F4AD; } </style> <link rel='stylesheet' id='hcb-style-css' href='https://webdesigner-go.com/wp-content/plugins/highlighting-code-block/build/css/hcb--dark.css?ver=2.0.1' type='text/css' media='all' /> <style id='hcb-style-inline-css' type='text/css'> :root{--hcb--fz--base: 14px}:root{--hcb--fz--mobile: 13px}:root{--hcb--ff:Menlo, Consolas, "Hiragino Kaku Gothic ProN", "Hiragino Sans", Meiryo, sans-serif;} </style> <script type="text/javascript" src="https://webdesigner-go.com/wp-includes/js/jquery/jquery.min.js?ver=3.7.1" id="jquery-core-js"></script> <script type="text/javascript" src="https://webdesigner-go.com/wp-includes/js/jquery/jquery-migrate.min.js?ver=3.4.1" id="jquery-migrate-js"></script> <script type="text/javascript" src="https://webdesigner-go.com/wp-content/plugins/download-manager/assets/js/wpdm.min.js" id="wpdm-frontend-js-js"></script> <script type="text/javascript" id="wpdm-frontjs-js-extra"> /* <![CDATA[ */ var wpdm_url = {"home":"https:\/\/webdesigner-go.com\/","site":"https:\/\/webdesigner-go.com\/","ajax":"https:\/\/webdesigner-go.com\/wp-admin\/admin-ajax.php"}; var wpdm_js = {"spinner":"<i class=\"wpdm-icon wpdm-sun wpdm-spin\"><\/i>","client_id":"b7fd4ba8c7e487130f8524d28c8672e9"}; var wpdm_strings = {"pass_var":"\u30d1\u30b9\u30ef\u30fc\u30c9\u78ba\u8a8d\u5b8c\u4e86 !","pass_var_q":"\u30c0\u30a6\u30f3\u30ed\u30fc\u30c9\u3092\u958b\u59cb\u3059\u308b\u306b\u306f\u3001\u6b21\u306e\u30dc\u30bf\u30f3\u3092\u30af\u30ea\u30c3\u30af\u3057\u3066\u304f\u3060\u3055\u3044\u3002","start_dl":"\u30c0\u30a6\u30f3\u30ed\u30fc\u30c9\u958b\u59cb"}; /* ]]> */ </script> <script type="text/javascript" src="https://webdesigner-go.com/wp-content/plugins/download-manager/assets/js/front.min.js?ver=3.3.08" id="wpdm-frontjs-js"></script>  <style id="pchpp_custom_style">:root{--pchpp-color-inline: #069A8E;--pchpp-color-custom: #5ca250;--pchpp-color-custom-2: #8e59e4;--pchpp-color-amazon: #f99a0c;--pchpp-color-rakuten: #e0423c;--pchpp-color-yahoo: #438ee8;--pchpp-color-mercari: #3c3c3c;--pchpp-inline-bg-color: var(--pchpp-color-inline);--pchpp-inline-txt-color: #fff;--pchpp-inline-shadow: 0 1px 4px -1px rgba(0, 0, 0, 0.2);--pchpp-inline-radius: 0px;--pchpp-inline-width: auto;}</style> <script id="pchpp_vars">window.pchppVars = {};window.pchppVars.ajaxUrl = "https://webdesigner-go.com/wp-admin/admin-ajax.php";window.pchppVars.ajaxNonce = "45f7eef670";</script> <script type="text/javascript" language="javascript">var vc_pid = "887808171";</script>  <link rel="icon" href="https://webdesigner-go.com/wp-content/uploads/2024/03/cropped-favicon-32x32.png" sizes="32x32" /> <link rel="icon" href="https://webdesigner-go.com/wp-content/uploads/2024/03/cropped-favicon-192x192.png" sizes="192x192" /> <link rel="apple-touch-icon" href="https://webdesigner-go.com/wp-content/uploads/2024/03/cropped-favicon-180x180.png" /> <meta name="msapplication-TileImage" content="https://webdesigner-go.com/wp-content/uploads/2024/03/cropped-favicon-270x270.png" /> <meta name="generator" content="WordPress Download Manager 3.3.08" /> <style> /* WPDM Link Template Styles */ </style> <style> :root { --color-primary: #4a8eff; --color-primary-rgb: 74, 142, 255; --color-primary-hover: #5998ff; --color-primary-active: #3281ff; --color-secondary: #6c757d; --color-secondary-rgb: 108, 117, 125; --color-secondary-hover: #6c757d; --color-secondary-active: #6c757d; --color-success: #018e11; --color-success-rgb: 1, 142, 17; --color-success-hover: #0aad01; --color-success-active: #0c8c01; --color-info: #2CA8FF; --color-info-rgb: 44, 168, 255; --color-info-hover: #2CA8FF; --color-info-active: #2CA8FF; --color-warning: #FFB236; --color-warning-rgb: 255, 178, 54; --color-warning-hover: #FFB236; --color-warning-active: #FFB236; --color-danger: #ff5062; --color-danger-rgb: 255, 80, 98; --color-danger-hover: #ff5062; --color-danger-active: #ff5062; --color-green: #30b570; --color-blue: #0073ff; --color-purple: #8557D3; --color-red: #ff5062; --color-muted: rgba(69, 89, 122, 0.6); --wpdm-font: "Sen", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol"; } .wpdm-download-link.btn.btn-primary { border-radius: 4px; } </style>  <script async src="https://www.googletagmanager.com/gtag/js?id=G-Q81B52D31G"></script> <script> window.dataLayer = window.dataLayer || []; function gtag() { dataLayer.push(arguments); } gtag('js', new Date()); gtag('config', 'G-Q81B52D31G'); </script> </head> <body id="top" class="home blog wp-embed-responsive"> <div class="wrapper"> <header class="header"> <div class="container"> <div class="header__inner"> <div class="header-logo"> <h1 class="header-logo__img"> <a href="https://webdesigner-go.com/"><img class="header__logo-img" src="https://webdesigner-go.com/wp-content/themes/webdesigner/img/logo.webp" alt="未経験からWebデザイナーへ！" width="210" height="64px"></a> </h1> <p class="header-logo__slogan">プロが教える最短最強の<br class="sp">転職ルート<br class="pc">【2025年版】</p> </div> <div class="header__pr"> <a href="https://note.com/necopon/n/n56cb79db5094" target="_blank" rel="noopener"> <img class="header__pr__img" src="https://webdesigner-go.com/wp-content/themes/webdesigner/img/bnr_portfolio-checklist-top.webp" alt="ポートフォリオチェックリスト" width="" height=""> </a> </div> <btn type="btn" id="js-btn-menu" class="btn-menu"> <div class="btn-menu-icon"> <div class="btn-menu-icon__inner"> <span class="btn-menu-icon__line"></span> </div> </div> <span class="btn-menu__text">カテゴリ</span> </div> </btn> </div> <div class="header__cat sp"> <div class="cat"> <div class="cat__heading"> <h2 class="cat__title"> 記事カテゴリ </h2> <p class="cat__desc">Webデザイナーになるために必要な知識やネタをカテゴリにまとめました。</p> </div> <div class="cat__body"> <div class="cat-box"> <ul class="cat-box__list"> <li class="cat-box__item"> <a href="/about/" class="cat-box__link cat-box__link--about"><span class="cat-box__label">Webデザイナー<br class="sp">とは</span></a> </li> <li class="cat-box__item"> <a href="/skill/"" class=" cat-box__link cat-box__link--skill"><span class="cat-box__label">必要なスキル</span></a> </li> <li class="cat-box__item"> <a href="/study/" class="cat-box__link cat-box__link--study"><span class="cat-box__label">勉強方法</span></a> </li> <li class="cat-box__item"> <a href="/job/" class="cat-box__link cat-box__link--job"><span class="cat-box__label">転職テクニック</span></a> </li> <li class="cat-box__item"> <a href="/portfolio/" class="cat-box__link cat-box__link--portfolio"><span class="cat-box__label">ポートフォリオ<br class="sp">制作</span></a> </li> <li class="cat-box__item"> <a href="/workstation/" class="cat-box__link cat-box__link--workstation"><span class="cat-box__label">快適な制作環境</span></a> </li> <li class="cat-box__item"> <a href="/proskill/" class="cat-box__link cat-box__link--proskill"><span class="cat-box__label">プロのノウハウ</span></a> </li> <li class="cat-box__item"> <a href="/rule/" class="cat-box__link cat-box__link--rule"><span class="cat-box__label">ルールや心得</span></a> </li> <li class="cat-box__item"> <a href="/agent/" class="cat-box__link cat-box__link--agent"><span class="cat-box__label">転職エージェント<br>体験談</span></a> </li> <li class="cat-box__item"> <a href="/template/" class="cat-box__link cat-box__link--template"><span class="cat-box__label">テンプレート</span></a> </li> <li class="cat-box__item sp"> <a href="/web_marketing/" class="cat-box__link cat-box__link--web_marketing"><span class="cat-box__label">Webマーケ</span></a> </li> <li class="cat-box__item sp"> <a href="/blog/" class="cat-box__link cat-box__link--blog"><span class="cat-box__label">ねこポンブログ</span></a> </li> </ul> <div class="cat-home-link sp"> <a class="cat-home-link__link" href="https://webdesigner-go.com">ホーム</a> </div> </div> </div> </div> </div> </header> <div class="header__law"> <div class="container"> 本サイトはプロモーションを含みます。 </div> </div> <main class="main"> <div class="contents"> <div class="page-home"> <div class="container"> <div class="sp-pr sp"> <a href="https://note.com/necopon/n/n56cb79db5094" target="_blank" rel="noopener"> <img src="https://webdesigner-go.com/wp-content/themes/webdesigner/img/bnr_portfolio-checklist-top.webp" alt="ポートフォリオチェックリスト" width="880" height="125"> </a> </div> <div class="popular-box"> <div class="popular-box__heading"> <h2 class="popular-box__title">人気コンテンツ</h2> </div> <ul class="popular-box__list"> <li class="popular-box__item"> <a href="/study/kyushokushien/"><img class="popular-box__img" src="https://webdesigner-go.com/wp-content/themes/webdesigner/img/popular_hellotraining.webp" width="1200" height="630" alt="無料！求職者支援訓練を検討しよう"></a> </li> <li class="popular-box__item"> <a href="/coding-practice/"><img class="popular-box__img" src="https://webdesigner-go.com/wp-content/themes/webdesigner/img/popular_coding-practice.webp" width="1200" height="630" alt="無料コーディング練習所"></a> </li> <li class="popular-box__item"> <a href="study/self-taught/"><img class="popular-box__img" src="https://webdesigner-go.com/wp-content/themes/webdesigner/img/popular_dokugaku.webp" width="1200" height="630" alt="独学でWebデザインを学ぶ方法"></a> </li> <li class="popular-box__item"> <a href="/job/portfolio/"><img class="popular-box__img" src="https://webdesigner-go.com/wp-content/themes/webdesigner/img/popular_portfolio.webp" width="1200" height="630" alt="Webデザイナーのポートフォリオの作り方"></a> </li> <li class="popular-box__item"> <a href="/template/portfolio-02/"><img class="popular-box__img" src="https://webdesigner-go.com/wp-content/themes/webdesigner/img/popular_portfolio-template.webp" width="1200" height="630" alt="無料ポートフォリオテンプレート"></a> </li> <li class="popular-box__item"> <a href="https://note.com/necopon/n/n56cb79db5094" target="_blank" rel="noopener"><img class="popular-box__img" src="https://webdesigner-go.com/wp-content/themes/webdesigner/img/popular_portfoilio-checklist.webp" width="1200" height="630" alt="note ここを直せば一気に良くなる！ポートフォリオチェックリスト"></a> </li> <li class="popular-box__item"> <a href="/study/webdesign-school/"><img class="popular-box__img" src="https://webdesigner-go.com/wp-content/themes/webdesigner/img/popular_school.webp" width="1200" height="630" alt="Webデザインスクール一覧"></a> </li> <li class="popular-box__item"> <a href="/workstation/favorite-items/"><img class="popular-box__img" src="https://webdesigner-go.com/wp-content/themes/webdesigner/img/popular_mustbuy.webp" width="1200" height="630" alt="ねこポンが買ってよかった〜なオススメのモノたち"></a> </li> <li class="popular-box__item"> <a href="/study/free-programming-school/"><img class="popular-box__img" src="https://webdesigner-go.com/wp-content/themes/webdesigner/img/popular_free-programming-school.webp" width="1200" height="630" alt="無料のプログラミングスクールも検討しよう"></a> </li> <li class="popular-box__item"> <a href="/job/agent/"><img class="popular-box__img" src="https://webdesigner-go.com/wp-content/themes/webdesigner/img/popular_agent.webp" width="1200" height="630" alt="未経験者もOK 転職サイト・転職エージェント"></a> </li> <li class="popular-box__item"> <a href="/study/mum/"><img class="popular-box__img" src="https://webdesigner-go.com/wp-content/themes/webdesigner/img/popular_mum.webp" width="1200" height="630" alt="ママ向けWebデザインスクール"></a> </li>  <li class="popular-box__item"> <a href="/workstation/server/"><img class="popular-box__img" src="https://webdesigner-go.com/wp-content/themes/webdesigner/img/popular_rental-server.webp" width="1200" height="630" alt="Webデザイナーにおすすめのレンタルサーバー　"></a> </li> </ul> </div> <div class="page-home__2col"> <div class="home-main"> <div class="cat"> <div class="cat__heading"> <h2 class="cat__title"> 記事カテゴリ </h2> <p class="cat__desc">Webデザイナーになるために必要な知識やネタをカテゴリにまとめました。</p> </div> <div class="cat__body"> <div class="cat-box"> <ul class="cat-box__list"> <li class="cat-box__item"> <a href="/about/" class="cat-box__link cat-box__link--about"><span class="cat-box__label">Webデザイナー<br class="sp">とは</span></a> </li> <li class="cat-box__item"> <a href="/skill/"" class=" cat-box__link cat-box__link--skill"><span class="cat-box__label">必要なスキル</span></a> </li> <li class="cat-box__item"> <a href="/study/" class="cat-box__link cat-box__link--study"><span class="cat-box__label">勉強方法</span></a> </li> <li class="cat-box__item"> <a href="/job/" class="cat-box__link cat-box__link--job"><span class="cat-box__label">転職テクニック</span></a> </li> <li class="cat-box__item"> <a href="/portfolio/" class="cat-box__link cat-box__link--portfolio"><span class="cat-box__label">ポートフォリオ<br class="sp">制作</span></a> </li> <li class="cat-box__item"> <a href="/workstation/" class="cat-box__link cat-box__link--workstation"><span class="cat-box__label">快適な制作環境</span></a> </li> <li class="cat-box__item"> <a href="/proskill/" class="cat-box__link cat-box__link--proskill"><span class="cat-box__label">プロのノウハウ</span></a> </li> <li class="cat-box__item"> <a href="/rule/" class="cat-box__link cat-box__link--rule"><span class="cat-box__label">ルールや心得</span></a> </li> <li class="cat-box__item"> <a href="/agent/" class="cat-box__link cat-box__link--agent"><span class="cat-box__label">転職エージェント<br>体験談</span></a> </li> <li class="cat-box__item"> <a href="/template/" class="cat-box__link cat-box__link--template"><span class="cat-box__label">テンプレート</span></a> </li> <li class="cat-box__item sp"> <a href="/web_marketing/" class="cat-box__link cat-box__link--web_marketing"><span class="cat-box__label">Webマーケ</span></a> </li> <li class="cat-box__item sp"> <a href="/blog/" class="cat-box__link cat-box__link--blog"><span class="cat-box__label">ねこポンブログ</span></a> </li> </ul> <div class="cat-home-link sp"> <a class="cat-home-link__link" href="https://webdesigner-go.com">ホーム</a> </div> </div> </div> </div> <section class="section section-beginner"> <div class="section-heading"> <h2 class="section-heading__title">はじめての方へ</h2> </div> <div class="section__body"> <h3 class="section__title">未経験からWebデザイナーを目指してみませんか？</h3> <p><img src="https://webdesigner-go.com/wp-content/themes/webdesigner/img/mv_greet01.webp" alt="年齢経験のわりに何もねぇ"></p> <p>↑20代後半の僕はまさにこれでした。<br>でも、今は週3日だけ楽しく働くフリーランスのWebデザイナーです。</p> <p>こんにちは！ねこポンと申します。このサイトでは、<strong>短期間で未経験からWebデザイナーになるための情報を惜しみなく紹介</strong>しています。</p> <h3 class="section__title">Webデザインができれば、他にも一気にできることが増えます！</h3> <p><img src="https://webdesigner-go.com/wp-content/themes/webdesigner/img/mv_greet02.webp" alt="ウェブデザインができるだけで一気にできることが増えるぞ"></p> <p><strong>Webデザインができれば、一気にできることが増えます。</strong><br>LINEスタンプ制作、アフィリエイトサイト構築、電子書籍の表紙のデザイン、ポスターやロゴ作り、年賀状や暑中見舞いのはがきデザイン、写真のレタッチ、Tシャツのデザインなどなど、さまざまなクリエイティブな創作活動ができるようになります。自分のアイデアを形にできるのです！</p> <h3 class="section__title">「このために生まれてきたんだ」とすら思える仕事をしよう</h3> <p><img src="https://webdesigner-go.com/wp-content/themes/webdesigner/img/mv_greet03.webp" alt="仕事がすごく楽しい！"></p> <p>しかも、Webデザイナーになれば、デザインとサイト作りの力が身につき、モノを作る喜びが感じられます。僕にとってはもう生きがいです。</p> <p><strong>「このために生まれてきたんだ」</strong></p> <p>とすら思えて、心が震える瞬間が何度も訪れました。十分にスキルを身につければフリーランスにもなれます。僕は業務委託で週3日だけ会社に常駐して働いています。それ以外の日はテニスをしています。</p> <p>まずは、この下の<span class="text-bold">【最短！未経験からWebデザイナーになる４ステップ】</span>からぜひ読んでみてください。Webデザインを勉強しようと決意できたら、すべての記事を読むことをおすすめします。学校の選び方や独学の仕方など詳しくお伝えしています。一緒にがんばりましょう。</p> <p><strong>「Webデザイナー」という職業を選択肢に入れてみませんか？人生のほんの３～６ヶ月の本気の勉強期間が、あなたの将来を劇的に変えてしまうかもしれません。</strong></p> </div> </section> <section class="section section-step"> <div class="section-heading"> <h2 class="section-heading__title">最短！未経験からWebデザイナーになる４ステップ</h2> </div> <div class="section__body"> <p>スキルゼロの状態からWebデザイナーにはほぼなれません。<span class="text-bold">まずは３～６ヶ月ほど学校か独学でWebデザインの基礎知識を習得し、ポートフォリオを制作する必要があります。</span> </p> <div class="step"> <div class="step__item"> <div class="step__heading"> <div class="step__label">ステップ1</div> <div class="step__title">無料の求職者支援訓練へ通う（3～6ヶ月）</div> </div> <div class="step__body"> <div class="step__img"><img src="https://webdesigner-go.com/wp-content/themes/webdesigner/img/step1.svg" alt="求職者支援訓練"></div> <div class="step__desc"> <p>まずは、<strong>Webデザインが勉強できる求職者支援訓練（ハロートレーニング）の学校に通いましょう。</strong>受講料は<strong>無料</strong>、講師はプロのWebデザイナーです。さらに一定の要件を満たせば<span class="text-bold">通学期間中、月に10万円</span>もらえます。<span class="text-bold">雇用保険（失業保険）の資格有り無しは関係なく</span>、基本的には誰でも受講できます。これほど最高の環境はありません。学校によって、通学期間は様々ですが、十分に学べる<strong>６ヶ月がベスト</strong>です。</p> <p>HTMLやPhotoshop、jQueryやWordPressなどを、プロから体系的にがっつり勉強できるのが求職者支援訓練の魅力です。</p> <div class="reference-link"><span class="reference-link__title">参考記事：</span><a href="/study/kyushokushien/">求職者支援訓練でWebデザインを学ぶ</a> </div> <div class="reference-link"><span class="reference-link__title">参考記事：</span><a href="/study/school-is-the-best-choice/">学校でWebデザインを勉強するのがベストな理由</a> </div> <p>現在は<strong>経済産業省の推進するリスキリング事業のおかげで、一般のスクールも安く受講できるようになっています。</strong><a href="//af.moshimo.com/af/c/click?a_id=3635793&p_id=2322&pc_id=4990&pl_id=30576&guid=ON" rel="nofollow" referrerpolicy="no-referrer-when-downgrade">『LIG』</a>などの有料スクールも検討してみましょう。最新設備に囲まれながら、第一線で活躍するプロのWebデザイナーに直接教えてもらえるのは貴重な学習の機会です。下記のWebデザインスクール一覧を参考にしてください。</p> <div class="reference-link"><span class="reference-link__title">参考記事：</span><a href="/study/webdesign-school/">Webデザインスクールの一覧【無料あり】</a> </div> <p>お仕事と学習を両立したい場合は、オンラインスクールを検討します。自宅でも通学でも受講できる<a href="/study/digital-hollywood/">『デジタルハリウッド』</a>は、Webデザイナーを目指すスクールのド定番です。また、通学が難しければ完全にオンラインで受講できる自学自習＆メンター付きの<a href="https://px.a8.net/svt/ejp?a8mat=2TXWCU+Z4TYI+3GWO+674EQ" rel="nofollow">『Tech Academy』</a>も人気です。</p> <div class="reference-link"><span class="reference-link__title">参考記事：</span><a href="/study/online/">オンラインスクールでWebデザインを学ぶ</a> </div> <p>発達障害などの障害のある方は<a href="https://px.a8.net/svt/ejp?a8mat=35S9AC+1PBWKQ+3UNE+TS3OI" rel="nofollow">『atGPジョブトレ』</a>などの就労移行支援サービスを利用しましょう。授業料が無料の『atGPジョブトレ』はクオリティの高い動画授業が受けられて、わからない箇所はその場ですぐに専門スタッフに質問できます。 </p> <div class="reference-link"><span class="reference-link__title">参考記事：</span><a href="/study/school-for-the-challenged/">障害を抱える方向けの無料Webデザインスクールや働き方について</a> </div> <p><strong>デザインスキルを一気に伸ばしたい人は<a href="//af.moshimo.com/af/c/click?a_id=4146002&p_id=5314&pc_id=14492&pl_id=69412" rel="nofollow" referrerpolicy="no-referrer-when-downgrade" attributionsrc>『fullme』</a>を受講しましょう。</strong>デザインスキルはレビュー、つまりダメ出しをしてもらって直すことで急激に成長します。レビュー付きのデザインスクール『fullme』がオススメです。デザインスキルを高めたい人はぜひ受講しましょう。</p> <p>事情があって、学校じゃなくてどうしても独学したいという方には、下記の記事で最短で独学するためのベストな書籍をまとめました！現在は、無料のレッスン動画サイトの<a href="https://dotinstall.com/" target="_blank">『ドットインストール』</a>や良質な書籍があるので、Webデザインの独学も可能な時代になりました。 </p> <div class="reference-link"><span class="reference-link__title">参考記事：</span><a href="/study/self-taught/">独学でWebデザインを勉強するための完全ガイド</a> </div> <p>PhotoshopやIllustratorを裏技的に安く入手する方法は下記の記事で紹介しています。普通に契約すると高額なので必ず利用するようにしましょう。</p> <div class="reference-link"><span class="reference-link__title">参考記事：</span><a href="/study/adobe/">裏技？AdobeCreativeCloudを安く入手する方法</a> </div> <p>Webデザイン関連の書籍はけっこう値段が高いものが多いです...。下記の記事で、Kindle Unlimitedで無料で読める書籍を紹介しているのでぜひチェックしてみてください。</p> <div class="reference-link"><span class="reference-link__title">参考記事：</span><a href="/study/kindle-unlimited/">Webデザイン関連の本をKindle Unlimitedで無料で読もう！オススメの本を紹介</a> </div> <p>エンジニアも選択肢として考えている方は、ProEnginner運営の無料のプログラミングスクール<a href="https://px.a8.net/svt/ejp?a8mat=2ZD4HL+4LIRFU+3NMW+5YZ77" target="_blank" rel="nofollow noopener">『プログラマカレッジ』</a>を受講しましょう。通常ならエンジニア養成のスクールは40～70万円以上はしますが、そもそもエンジニアは難関で、なれる可能性も少ないため、そんなにもお金を掛けるのはもったいないです。無料のプログラマカレッジに通学しましょう。 </p> <div class="reference-link"><span class="reference-link__title">参考記事：</span><a href="/about/engineer/">なぜ「エンジニア」ではなく「Webデザイナー」をすすめるのか</a> </div> </div> </div> </div>  <div class="step__item"> <div class="step__heading"> <div class="step__label">ステップ2</div> <div class="step__title">Webのポートフォリオを制作</div> </div> <div class="step__body"> <div class="step__img"><img src="https://webdesigner-go.com/wp-content/themes/webdesigner/img/step2.svg" alt="ポートフォリオ"></div> <div class="step__desc"> <p>ポートフォリオは紙版とサイトの２つがあれば何かと便利ですが、両方作ってる時間が惜しいので、<strong>Webのポートフォリオ（ポートフォリオサイト）だけは用意</strong>しましょう。</p> <p> 紙のポートフォリオを作る場合は、印刷してクリアファイルに入れたものを一つ用意しておきます。さらにPDFにしてGoogleドライブにアップしておき共有URLを発行しておけば、転職エージェントや面接先の企業にも共有できてラクです。 </p> <div class="reference-link"><span class="reference-link__title">参考記事：</span><a href="/job/portfolio/">【完全解説】Webデザイナー用のポートフォリオの作り方</a> </div> <p>ポートフォリオのチェックリストをnoteで販売中です。<strong>激安のワンコイン500円です。</strong>セルフチェックをして改善点を見つけて少しでもポートフォリオの質を上げましょう。</p> <div class="reference-link"><span>note：</span><a href="https://note.com/necopon/n/n56cb79db5094" target="_blank" rel="noopener">Webデザイナー向けポートフォリオチェックリスト84項目。ここを直せば一気に良くなる！</a> </div> <p>ポートフォリオ用のWordPressテーマを販売しています。時間短縮をしたい方はぜひ使ってみてください。</p> <div class="reference-link"><span class="reference-link__title">参考記事：</span><a href="/template/portfolio-basic-wordpress/">ポートフォリオ用WordPressテーマ『PORTFOLIOベーシック』</a> </div> <p>ポートフォリオ用のHTMLテンプレートは無料で配布しています。</p> <div class="reference-link"><span class="reference-link__title">参考記事：</span><a href="/template/portfolio-02/">ポートフォリオHTMLテンプレート（ベーシック）</a> </div> <p>ポートフォリオサイトをアップするレンタルサーバーを契約します。無料のレンタルサーバーもありますが広告が表示されてしまい自分の作品集が台無しです。有料とはいえ、たったの月額100円からレンタルサーバーは借りられるので必ず利用してください。</p> <div class="reference-link"><span class="reference-link__title">参考記事：</span><a href="/workstation/server/">Webデザイナーにおすすめのレンタルサーバー</a> </div> </div> </div> </div> <div class="step__item"> <div class="step__heading"> <div class="step__label">ステップ3</div> <div class="step__title">転職サイト＆転職エージェントに登録</div> </div> <div class="step__body"> <div class="step__img"><img src="https://webdesigner-go.com/wp-content/themes/webdesigner/img/step3.svg" alt="転職サイト"></div> <div class="step__desc"> <p> ポートフォリオの準備できたら転職活動開始です！<strong>転職サイトで未経験OKの求人を探して自分で応募するか、未経験でも登録可能な転職エージェントに登録して求人を紹介してもらいます。</strong></p> <p>定番のIT/Web系に特化した転職サイトが<a href="https://h.accesstrade.net/sp/cc?rk=0100pec600j7rp" rel="nofollow" referrerpolicy="no-referrer-when-downgrade">『Green』<img src="https://h.accesstrade.net/sp/rr?rk=0100pec600j7rp" width="1" height="1" border="0" alt="" /></a>です。登録して「未経験OK」の求人を探して気になる企業があれば応募しましょう。</p> <p>また、未経験でも応募可能な案件も扱う数少ない転職エージェントの<a href="https://affi-plus.com/link.php?i=pgw4bi8s1gok&m=mgw3fq537kbu">『ワークポート』</a>に登録します。転職エージェントは未経験や地域によってはなかなか案件を紹介してくれないケースもありますが、利用は無料なのでとりあえず登録しておいて求人の紹介待ちをしておきましょう。</p> <div class="reference-link"><span class="reference-link__title">参考記事：</span><a href="/job/agent/">未経験のWebデザイナーが登録しておくべき転職エージェント</a></div>  <p>未経験からWebデザイナーになる場合の雇用形態は、<span class="text-bold">正社員</span>か、お互いの相性を見定めてから正社員になる<span class="text-bold">紹介予定派遣</span>をおすすめします。</p> <p><strong>派遣になるのは要注意です。</strong>スキルがほとんど身につかないリンク張り替えやテキスト修正などの作業ばかりやらされて、不要になればすぐにクビになる可能性もあります。新規サイトのデザインやゼロからコーディングなどの成長できる案件は、すべて正社員スタッフに回されます。会社に長く所属する可能性のある正社員を成長させたいからです。でも現在はコロナ禍で派遣も検討すべきです。派遣会社と派遣先は十分に吟味しましょう。</p> <p>SESへの入社はやめましょう。Webデザインとは関係のない仕事をやらされる可能性があります。 </p> <div class="reference-link"><span class="reference-link__title">参考記事：</span><a href="/job/haken/">未経験から派遣のWebデザイナーになってはいけない理由</a> </div> <div class="reference-link"><span class="reference-link__title">参考記事：</span><a href="/job/ses/">SESへの転職はやめたほうがいいです</a> </div> </div> </div> </div> <div class="step__item"> <div class="step__heading"> <div class="step__label">ステップ4</div> <div class="step__title">面接＆内定！</div> </div> <div class="step__body"> <div class="step__img"><img src="https://webdesigner-go.com/wp-content/themes/webdesigner/img/step4.svg" alt="内定"></div> <div class="step__desc"> <p>転職エージェントが企業をいくつか紹介してくれたり、自分で転職サイトで探してみて気になる会社を受けましょう。<strong>転職サイトや転職エージェントで自分に合いそうな求人が見つからなければ、企業の採用ページからも直接応募します。あらゆる手段を試しましょう！</strong></p> <div class="reference-link"><span class="reference-link__title">参考記事：</span><a href="/job/typical-questions-answer/">【面接対策】Webデザイナーの面接で聞かれるリアルな質問20個とその回答例</a></div> <p> <strong>デザインとコーディングを本気でがっつり身につけたいなら、Web制作会社に入りましょう。</strong>多くのクライアントの様々なテイストのサイトに関われて、グッとデザイン力とコーディング力が成長します。 </p> <div class="reference-link"><span class="reference-link__title">参考記事：</span><a href="/job/best-company/">新人Webデザイナーにとってベストな会社の3つの基準</a> </div> <p> Web制作会社で最低でも2年間働いて、自信をつけたら後は自由です。フロントエンドエンジニアに転向もありだし、フリーランスになったり、僕のように週3日だけ業務委託で会社で働いたり、あるいは事業会社のインハウスWebデザイナーになったり、自分の好みに合わせて複数の道が開けます。 </p> <p><span class="text-bold">Web制作会社は年齢的にも体力的にもキツいという方は、学校で身につけたWebデザインの基礎知識と今までの仕事で培ってきたスキルの合わせ技で、事業会社のWeb担当者やWebディレクター、マーケッター、プランナーの道があります。</span> </p> <div class="reference-link"><span class="reference-link__title">参考記事：</span><a href="/job/best-step-to-becoming-webdesigner/">業界未経験からWebデザイナーになるためのベストなステップ</a> </div> <div class="reference-link"><span class="reference-link__title">参考記事：</span><a href="/job/age/">30代未経験でもWebデザイナーになれる？年齢別アドバイス</a> </div> </div> </div> </div> </div> </div> </section> <section class="section section-agent"> <div class="section-heading"> <h2 class="section-heading__title">未経験OK！の転職エージェントと転職サイト</h2> </div> <div class="section__body"> <p>未経験OKの転職エージェントは少ないです。<strong>Web系に強い『ワークポート』は登録しておきましょう。</strong><br>プログラミングに興味がある方は、完全無料のプログラミングスクールで転職支援もしてくれる<strong>『プログラマカレッジ』</strong>も時間があればぜひ挑戦してみましょう。</p> <div class="service-list"> <div class="service-list__item"> <div class="service-list__img"><a href="https://affi-plus.com/link.php?i=pgw4bi8s1gok&m=mgw3fq537kbu" rel="nofollow"><img src="https://webdesigner-go.com/wp-content/themes/webdesigner/img/service_workport.webp" alt="ワークポート"></a> </div> <div class="service-list__desc"> <h3 class="service-list__title">ワークポート：未経験でも登録可能なWeb/ITに強い転職エージェント</h3> <p> 『ワークポート』は、未経験からでもWeb系職種を紹介してくれる数少ない転職エージェントです。コロナが収まった現時点でもなかなかWebデザイナーやコーダーの求人は紹介しづらい現状はありますが、Web系職種、例えばWebマーケターや広告運用、Webディレクターなどの求人はある程度は紹介できるようになってきています。大手から中小企業まで幅広い業界の企業を紹介してくれます。また、<strong>履歴書や職務経歴書の添削、面接のコツ、キャリアプランの相談など、面談を通じてサポートしてくれます。</strong>面談は平日と週末に対応可能です。ワークポートの強みは、IT/Web/ゲーム系企業との深いつながりと、全国に拠点が多く多数の求人紹介が可能な点です。 </p> <div class="service-list__btn"><a class="btn btn--lg" href="https://affi-plus.com/link.php?i=pgw4bi8s1gok&m=mgw3fq537kbu" rel="nofollow">ワークポートの公式サイト</a> </div> </div> </div> <div class="service-list__item"> <div class="service-list__img"><a href="https://h.accesstrade.net/sp/cc?rk=0100pec600j7rp" rel="nofollow" referrerpolicy="no-referrer-when-downgrade" data-nodal=""><img src="https://webdesigner-go.com/wp-content/themes/webdesigner/img/service_green.webp" alt="Green"></a> </div> <div class="service-list__desc"> <h3 class="service-list__title">Green：Web系職種の定番の転職サイト</h3> <p>『Green』は、Webデザイナーが使う定番の転職サイトです。経験者向けの求人が多いですが、未経験OKのWebデザイナー求人も扱っています。通常の転職サイトのように自分で条件を設定して検索をし応募をします。<strong>GreenはWeb系の求人数が非常に多く、見ているだけでWeb業界の職種や給与などの情報が得られるので、まずは登録してみましょう。</strong>デザイナーやコーダーの求人以外にも、Webマーケターや広告運用、Webディレクターなどの求人も多く扱っています。</p> <div class="service-list__btn"><a class="btn btn--lg" href="https://h.accesstrade.net/sp/cc?rk=0100pec600j7rp" rel="nofollow" referrerpolicy="no-referrer-when-downgrade" data-nodal="">Greenの公式サイト<img decoding="async" src="https://h.accesstrade.net/sp/rr?rk=0100pec600j7rp" width="1" height="1" border="0" alt=""></a> </div> </div> </div> </div> </div> </section> <section class="section section-school"> <div class="section-heading"> <h2 class="section-heading__title">おすすめのWebデザインスクール一覧</h2> </div> <div class="section__body"> <p>オススメのWebデザイン＆プログラミングスクールを一部紹介！主要なスクール23校は<a href="/study/webdesign-school/">『Webデザインスクールの一覧』</a>でチェックしましょう。 </p> <div class="service-list"> <div class="service-list__item"> <div class="service-list__img"><a href="/study/kyushokushien/"><img src="https://webdesigner-go.com/wp-content/themes/webdesigner/img/service_hellotraining.webp" alt="求職者支援訓練"><br></a></div> <div class="service-list__desc"> <h3 class="service-list__title">求職者支援訓練：無料なのでまずはここを検討！</h3> <p><strong>一番おすすめのスクールは国の運営する求職者支援訓練（ハロートレーニング）です。授業料が無料！しかも約６ヶ月という期間がWebデザインの基礎スキルを習得するのに十分な長さです。</strong><span class=" text-bold">僕自身も求職者支援訓練を経てWebデザイナーになりました。</span><br>東京にはWebデザイナー系の訓練校は６校ほどあり、各地域にも１〜３校ほどは見つかるため、どんな人も通いやすいのもおすすめのポイントです。<br>ふだん税金を払っているので、このようなスクールはしっかり活用させてもらいましょう笑。</p> <div class="reference-link"><span class="reference-link__title">参考記事：</span><a href="/study/kyushokushien/">【無料】求職者支援訓練でWebデザインを学ぶ</a> </div> <p><span class=" text-bold">失業保険が受給できる方は職業訓練がおすすめ</span>です。期間が約３ヶ月と短くやや理解が浅くなる点は不安ですが、復習や独学で補えれば問題ありません。最近は数はで少ないですが６ヶ月コースも登場しています。</p> <p class=" reference-link"><span class="reference-link__title">参考記事：</span><a href="/study/kunren/">【無料】職業訓練でWebデザインを学ぶ</a></p> </div> </div> <div class="service-list__item"> <div class="service-list__img"><a href="//af.moshimo.com/af/c/click?a_id=4144613&p_id=5265&pc_id=14295&pl_id=68954" rel="nofollow" referrerpolicy="no-referrer-when-downgrade"><img src="https://webdesigner-go.com/wp-content/themes/webdesigner/img/service_digitalhollywood.webp" alt="デジタルハリウッド"></a> </div> <div class="service-list__desc"> <h3 class="service-list__title">デジハリ：Web業界の定番で鉄板のスクール</h3> <p>『デジタルハリウッド』ことデジハリは、求職者支援訓練か職業訓練に通えない場合に次に検討する<strong>ド定番のスクール</strong>です。動画授業×マンツーマン指導なので<strong>仕事との両立も可能</strong>です。僕の知り合いのWebデザイナーもデジハリの出身者が多いです。プランは「Webデザイナー専攻超実践型就職・転職プラン」がオススメ。<strong>「お仕事TRYプログラム」で在学中に実際のクライアントの仕事が体験できるので実案件をポートフォリオに掲載できます！</strong>未経験の人が転職活動で直面する実務経験が無くて採用されづらい壁を突破できます。</p> <div class="service-list__btn"><a class="btn btn--lg" href="//af.moshimo.com/af/c/click?a_id=4144613&p_id=5265&pc_id=14295&pl_id=68954" rel="nofollow" referrerpolicy="no-referrer-when-downgrade">デジハリの公式サイト</a> </div> </div> </div> <div class="service-list__item"> <div class="service-list__img"><a href="//af.moshimo.com/af/c/click?a_id=3635793&p_id=2322&pc_id=4990&pl_id=30576" rel="nofollow" referrerpolicy="no-referrer-when-downgrade"><img src="https://webdesigner-go.com/wp-content/themes/webdesigner/img/service_lig-digitalhollywood.webp" alt="LIG"></a> </div> <div class="service-list__desc"> <h3 class="service-list__title">デジLIG：有名Web制作会社LIGが運営するスクール</h3> <p><strong>『デジタルハリウッドSTUDIO by LIG（通称：デジLIG）』は、超有名Web制作会社LIGによるWebデザインスクール</strong>です。上で紹介したデジハリ（デジタルハリウッド）のLIGコラボのスクールです。学習スタイルはデジハリと同じで動画授業×マンツーマン指導です。LIGが運営するオウンドメディアやYouTubeチャンネルの画像を課題として作ったり、実際にLIGの現役デザイナーが制作したデザインを見本にした課題があったりと、LIGが好きな人やスクールがある首都圏にお住まいの方にオススメのスクールです。興味がある人はデジハリとLIGの両方の無料カウンセリング（説明会）を受けてみて比較してみましょう。</p> <div class="service-list__btn"><a class="btn btn--lg" href="//af.moshimo.com/af/c/click?a_id=3635793&p_id=2322&pc_id=4990&pl_id=30576" rel="nofollow" referrerpolicy="no-referrer-when-downgrade">デジLIGの公式サイト</a> </div> </div> </div> <div class="service-list__item"> <div class="service-list__img"><a href="//af.moshimo.com/af/c/click?a_id=4146002&p_id=5314&pc_id=14492&pl_id=69632" rel="nofollow" referrerpolicy="no-referrer-when-downgrade"><img src="//image.moshimo.com/af-img/4976/000000069632.jpg" width="300" height="250" style="border:none;"></a></div> <div class="service-list__desc"> <h3 class="service-list__title">Fullme：デザイン学習特化型のレビュー付きオンラインスクール</h3> <p>『Fullme』は<strong>デザイン学習特化型のオンラインスクール</strong>です。最大の特長はなんといっても<strong>プロによる課題デザイン添削</strong>です。デザイン界隈では有名な書籍「けっきょく、よはく」や「「3色だけでセンスのいい色」などを執筆するデザイン会社『ingectar-e』が講師を務めています。<strong>デザインスキルはレビューをしてもらってこそ急速に成長するため、とてもオススメのスクール</strong>です。僕がデザインを学びたいと思ったら、このスクールを選びます。</p> <div class="service-list__btn"><a class="btn btn--lg" href="//af.moshimo.com/af/c/click?a_id=4146002&p_id=5314&pc_id=14492&pl_id=69412" rel="nofollow" referrerpolicy="no-referrer-when-downgrade">fullmeの公式サイト</a></div> </div> </div> <div class="service-list__item"> <div class="service-list__img"><a href="//af.moshimo.com/af/c/click?a_id=2742091&p_id=3554&pc_id=8575&pl_id=50100" rel="nofollow" referrerpolicy="no-referrer-when-downgrade"><img src="https://webdesigner-go.com/wp-content/themes/webdesigner/img/service_daytra.webp" alt="デイトラ"></a> </div> <div class="service-list__desc"> <h3 class="service-list__title">デイトラ：コスパの高いSNSで人気のスクール</h3> <p>『デイトラ』は<strong>Webデザインコースが¥119,800からとコスパの高いオンライン完結型のWeb制作スクール</strong>です。格安ながらも<strong>デザインとコーディングのレビュー（添削）が受けられます。</strong>通学式のスクールに40、50万円も払う余裕はないけど、デザインやコーディングのレビューはしてほしい！という方はデイトラを受講しましょう。デザインを重点的に学びたい方は「Webデザインコース」、コーディングスキルを高めたい方は「Web制作コース」を受講しましょう。</p> <div class="service-list__btn"><a class="btn btn--lg" href="//af.moshimo.com/af/c/click?a_id=2742091&p_id=3554&pc_id=8575&pl_id=50100" rel="nofollow" referrerpolicy="no-referrer-when-downgrade">デイトラの公式サイト</a></div> </div> </div> <div class="service-list__item"> <div class="service-list__img"><a href="https://px.a8.net/svt/ejp?a8mat=2ZD4HL+4LIRFU+3NMW+5YZ77" rel="nofollow"><img src="https://webdesigner-go.com/wp-content/themes/webdesigner/img/service_programmer-college.webp" alt="プログラマカレッジ"></a> </div> <div class="service-list__desc"> <h3 class="service-list__title">プログラマカレッジ：定番の無料プログラミングスクール</h3> <p>『プログラマカレッジ』は20代限定の<strong>オンラインの完全無料のプログラミングスクール</strong>です。無料なのでエンジニアになりたい方はぜひ挑戦してみてください。無料の仕組みは転職が成功した生徒の企業から支払われる協力金で成り立っています。Javaを中心にHTML/CSSやMySQLなどを学びます。授業の質は高いと評判です。<strong>現在受講生にノートパソコンプレゼントキャンペーンを実施中です。</strong><a href="https://webdesigner-go.com/study/programmercollege/">『プログラマカレッジ』の卒業生による体験談記事はこちら</a>です。</p> <div class="service-list__btn"><a class="btn btn--lg" href="https://px.a8.net/svt/ejp?a8mat=2ZD4HL+4LIRFU+3NMW+5YZ77" rel="nofollow">プログラマカレッジの公式サイト</a> </div> </div> </div> <div class="service-list__item"> <div class="service-list__img"><a href="https://t.felmat.net/fmcl?ak=I36556.1.9702956.W78759Z" rel="nofollow"><img src="https://webdesigner-go.com/wp-content/themes/webdesigner/img/service_free-php-school.webp" alt="無料PHPスクール"></a></div> <div class="service-list__desc"> <h3 class="service-list__title">無料PHPスクール:無料でPHPを学びたければココ</h3> <p>『無料PHPスクール（通称：Pスク）』も上で紹介した『プログラマカレッジ』と同様の<strong>完全無料のプログラミングスクール</strong>です。特徴的なのはオンライン受講も可能ですが、<strong>通学式</strong>で、学習するプログラミング言語を<strong>PHP</strong>に絞っている点です。PHPはがっつりプログラミング言語である一方で、ECサイト構築やWordPressで使われるなどWeb系と親和性が高い言語なので、Web系の会社で働きたい人にはこの無料スクールがオススメです。23日間という短期間でハードめなカリキュラムな分、未経験でも内定２社を保証してくれます！校舎は東京の池袋にあります。</p> <div class="service-list__btn"><a class="btn btn--lg" href="https://t.felmat.net/fmcl?ak=I36556.1.9702956.W78759Z" rel="nofollow">無料PHPスクールの公式サイト</a> </div> </div> </div> </div> </div> </section> <section class="section section-qa"> <div class="section-heading"> <h2 class="section-heading__title">Webデザインお悩み相談</h2> </div> <div class="section__body"> <p>みなさんから頂いたWebデザインについてのお悩みやご質問をまとめています。ひとつひとつ回答していますので参考にしてみてください。ご質問は各記事のコメント欄よりお願いします。</p> <ul class="article-text-list"> <li class="article-text-list__item"> <a class="article-text-list__link" href="https://webdesigner-go.com/qa/1860/"> タイピングが苦手です。Webデザイナーになるにはどの程度タイピングスキルが必要ですか？ </a> </li> <li class="article-text-list__item"> <a class="article-text-list__link" href="https://webdesigner-go.com/qa/1705/"> デザインとコーディングのどっちを先に勉強したらいいですか？ </a> </li> <li class="article-text-list__item"> <a class="article-text-list__link" href="https://webdesigner-go.com/qa/1704/"> 50代ですが、副業でWebデザインをやって稼げますか？ </a> </li> <li class="article-text-list__item"> <a class="article-text-list__link" href="https://webdesigner-go.com/qa/1703/"> 職業訓練を卒業したらすぐに就職した方がいいですか？ </a> </li> <li class="article-text-list__item"> <a class="article-text-list__link" href="https://webdesigner-go.com/qa/1702/"> Webデザイナーは性格が悪い人が多いですか？ </a> </li> </ul> <div class="section__btn"> <a class="btn btn--type02 btn--w100" href="/qa/">お悩み相談をすべて見る</a> </div> </div> </section> <section class="section section-game"> <div class="section-heading"> <h2 class="section-heading__title">Web制作会社訪問ゲーム</h2> </div> <div class="section__body"> <p><a href="/game/" target="_blank" rel="noopener"><img class="img-border" src="https://webdesigner-go.com/wp-content/themes/webdesigner/img/bnr_game.webp" alt="Web制作会社探検"></a></p> <p>↑Web制作会社を歩き回れるゲームを作ってみました！ぜひ探検してみてください。(音が出ます)</p> </div> </section> <section class="section-2col"> <section class="section section-about"> <div class="section-heading"> <h2 class="section-heading__title"> Webデザイナーとは </h2> </div> <div class="section__body"> <ul class="article-text-list"> <li class="article-text-list__item"> <a class="article-text-list__link" href="https://webdesigner-go.com/about/what-webdesigner-is/"> Webデザイナーとは？ </a> </li> <li class="article-text-list__item"> <a class="article-text-list__link" href="https://webdesigner-go.com/about/job-description/"> Webデザイナーの仕事内容「デザイン」「コーディング」 </a> </li> <li class="article-text-list__item"> <a class="article-text-list__link" href="https://webdesigner-go.com/about/design-and-coding/"> Webデザイナーは、デザインとコーディングの両方できなきゃダメ？ </a> </li> <li class="article-text-list__item"> <a class="article-text-list__link" href="https://webdesigner-go.com/about/company-freelance/"> Webデザイナーの働き方（企業とフリーランス） </a> </li> <li class="article-text-list__item"> <a class="article-text-list__link" href="https://webdesigner-go.com/about/typical-day-as-a-webdesigner/"> Webデザイナーの一日の流れ。たまにヒマです。 </a> </li> <li class="article-text-list__item"> <a class="article-text-list__link" href="https://webdesigner-go.com/about/money/"> Webデザイナーのリアルな年収は？ </a> </li> <li class="article-text-list__item"> <a class="article-text-list__link" href="https://webdesigner-go.com/about/suited-for-webdesigner/"> リアルなWebデザイナーの適性（向き不向き） </a> </li> <li class="article-text-list__item"> <a class="article-text-list__link" href="https://webdesigner-go.com/about/necessary/"> Webデザイナーに必要なもの </a> </li> <li class="article-text-list__item"> <a class="article-text-list__link" href="https://webdesigner-go.com/about/engineer/"> なぜ「エンジニア」ではなく「Webデザイナー」をすすめるのか </a> </li> <li class="article-text-list__item"> <a class="article-text-list__link" href="https://webdesigner-go.com/about/programmer/"> プログラマーの適性をプログラマーになれなかった僕が語る </a> </li> <li class="article-text-list__item"> <a class="article-text-list__link" href="https://webdesigner-go.com/about/uiux-designer/"> UI/UXデザイナーとは？Webデザイナーとの違い </a> </li> <li class="article-text-list__item"> <a class="article-text-list__link" href="https://webdesigner-go.com/about/coder-and-frontendenginner/"> コーダーとフロントエンドエンジニアの違い </a> </li> <li class="article-text-list__item"> <a class="article-text-list__link" href="https://webdesigner-go.com/about/workplace-webdesigner/"> Webデザイナーの自由すぎる職場環境 </a> </li> <li class="article-text-list__item"> <a class="article-text-list__link" href="https://webdesigner-go.com/about/3days/"> 週３日だけ働きたいならWebデザイナーになろう </a> </li> <li class="article-text-list__item"> <a class="article-text-list__link" href="https://webdesigner-go.com/about/telework/"> Webデザイナーはテレワークができる職種！ </a> </li> <li class="article-text-list__item"> <a class="article-text-list__link" href="https://webdesigner-go.com/about/hsp/"> WebデザイナーはHSPに向いているお仕事！ </a> </li> <li class="article-text-list__item"> <a class="article-text-list__link" href="https://webdesigner-go.com/about/market/"> Webデザイナーの需要はあるが、駆け出しWebデザイナーが大量に現れてパイの奪い合いになった </a> </li> <li class="article-text-list__item"> <a class="article-text-list__link" href="https://webdesigner-go.com/about/being-freelance/"> 未経験からいきなりフリーランスのWebデザイナーになるのがオススメできない理由 </a> </li> <li class="article-text-list__item"> <a class="article-text-list__link" href="https://webdesigner-go.com/about/work-overtime/"> Webデザイナーの残業事情。良い残業とは？ </a> </li> <li class="article-text-list__item"> <a class="article-text-list__link" href="https://webdesigner-go.com/about/nenpou/"> Web制作会社は「裁量労働制」「年俸制」「退職金なし」が普通です </a> </li> </ul> </div> </section> <section class="section section-skill"> <div class="section-heading"> <h2 class="section-heading__title"> 必要なスキル </h2> </div> <div class="section__body"> <ul class="article-text-list"> <li class="article-text-list__item"> <a class="article-text-list__link" href="https://webdesigner-go.com/skill/skills-webdesigner-must-have/"> 最初にチェック！Webデザイナーに転職する前に最低限持つべきスキル一覧 </a> </li> <li class="article-text-list__item"> <a class="article-text-list__link" href="https://webdesigner-go.com/skill/html-css-for-coding/"> HTML/CSS – コーディングに必要なスキル </a> </li> <li class="article-text-list__item"> <a class="article-text-list__link" href="https://webdesigner-go.com/skill/figma/"> Figma – サイトやアプリのデザインを制作するソフト </a> </li> <li class="article-text-list__item"> <a class="article-text-list__link" href="https://webdesigner-go.com/skill/photoshop/"> Photoshop – サイトやバナーのデザイン・画像編集のソフト </a> </li> <li class="article-text-list__item"> <a class="article-text-list__link" href="https://webdesigner-go.com/skill/illustrator/"> Illustrator – アイコン・イラストなど絵的なモノ制作ソフト </a> </li> <li class="article-text-list__item"> <a class="article-text-list__link" href="https://webdesigner-go.com/skill/jquery/"> jQuery – サイトに動きをつけるプログラミング言語 </a> </li> <li class="article-text-list__item"> <a class="article-text-list__link" href="https://webdesigner-go.com/skill/wordpress/"> WordPress – サイトを簡単に更新可能にするシステム </a> </li> <li class="article-text-list__item"> <a class="article-text-list__link" href="https://webdesigner-go.com/skill/sass/"> Sass – CSSを効率的に書くためメタ言語 </a> </li> <li class="article-text-list__item"> <a class="article-text-list__link" href="https://webdesigner-go.com/skill/git/"> Git – コードのバージョンを管理する仕組み </a> </li> <li class="article-text-list__item"> <a class="article-text-list__link" href="https://webdesigner-go.com/skill/design/"> 就職前にデザインのルール原則だけは知っておこう </a> </li> <li class="article-text-list__item"> <a class="article-text-list__link" href="https://webdesigner-go.com/skill/drawing/"> Webデザイナーは絵が下手でも大丈夫？ </a> </li> <li class="article-text-list__item"> <a class="article-text-list__link" href="https://webdesigner-go.com/skill/english/"> Webデザイナーに英語は必要？ </a> </li> </ul> </div> </section> <section class="section section-study"> <div class="section-heading"> <h2 class="section-heading__title"> 勉強方法 </h2> </div> <div class="section__body"> <ul class="article-text-list"> <li class="article-text-list__item"> <a class="article-text-list__link" href="https://webdesigner-go.com/study/how-to-learn-webdesign/"> Webデザインはどうやって勉強すればいいのか？ </a> </li> <li class="article-text-list__item"> <a class="article-text-list__link" href="https://webdesigner-go.com/study/low-budget/"> お金をかけずにWebデザイナーになる方法 </a> </li> <li class="article-text-list__item"> <a class="article-text-list__link" href="https://webdesigner-go.com/study/school-bymyself/"> どっち？独学かスクールかは自分の性格に合わせて選ぼう </a> </li> <li class="article-text-list__item"> <a class="article-text-list__link" href="https://webdesigner-go.com/study/school-is-the-best-choice/"> 学校でWebデザインを勉強するのがベストな理由 </a> </li> <li class="article-text-list__item"> <a class="article-text-list__link" href="https://webdesigner-go.com/study/free-school/"> 安いWebデザインのスクール？いえいえ、国の無料の学校がありますよ </a> </li> <li class="article-text-list__item"> <a class="article-text-list__link" href="https://webdesigner-go.com/study/best-school/"> 職業訓練・求職者支援訓練・一般のWebスクール…どれがベスト？ </a> </li> <li class="article-text-list__item"> <a class="article-text-list__link" href="https://webdesigner-go.com/study/kyushokushien/"> 【無料】求職者支援訓練でWebデザインを学ぶ </a> </li> <li class="article-text-list__item"> <a class="article-text-list__link" href="https://webdesigner-go.com/study/kunren/"> 【無料】職業訓練でWebデザインを学ぶ </a> </li> <li class="article-text-list__item"> <a class="article-text-list__link" href="https://webdesigner-go.com/study/web-school/"> 一般のWebスクールで学ぶ </a> </li> <li class="article-text-list__item"> <a class="article-text-list__link" href="https://webdesigner-go.com/study/adjust-academy/"> アジャストアカデミーに遊びに行ってきたよ！雰囲気は？評判は？就職率は？ねほりはほりと３時間も聞いてきました。 </a> </li> <li class="article-text-list__item"> <a class="article-text-list__link" href="https://webdesigner-go.com/study/digital-hollywood/"> 未経験で実務経験がゲットできる！デジタルハリウッド『Webデザイナー専攻超実践型就職・転職プラン』が超オススメ！ </a> </li> <li class="article-text-list__item"> <a class="article-text-list__link" href="https://webdesigner-go.com/study/webdesign-school/"> Webデザインスクールの一覧 </a> </li> <li class="article-text-list__item"> <a class="article-text-list__link" href="https://webdesigner-go.com/study/tokyo-webdesign-school/"> 東京のWebデザインスクール一覧 </a> </li> <li class="article-text-list__item"> <a class="article-text-list__link" href="https://webdesigner-go.com/study/shinjuku-webdesign-school/"> 新宿のWebデザインスクール一覧 </a> </li> <li class="article-text-list__item"> <a class="article-text-list__link" href="https://webdesigner-go.com/study/shibuya-webdesign-school/"> 渋谷のWebデザインスクール一覧 </a> </li> <li class="article-text-list__item"> <a class="article-text-list__link" href="https://webdesigner-go.com/study/ikebukuro-webdesign-school/"> 池袋のWebデザインスクール一覧 </a> </li> <li class="article-text-list__item"> <a class="article-text-list__link" href="https://webdesigner-go.com/study/saitama-webdesign-school/"> 埼玉のWebデザインスクール一覧 </a> </li> <li class="article-text-list__item"> <a class="article-text-list__link" href="https://webdesigner-go.com/study/chiba-webdesign-school/"> 千葉のWebデザインスクール一覧 </a> </li> <li class="article-text-list__item"> <a class="article-text-list__link" href="https://webdesigner-go.com/study/yokohama-webdesign-school/"> 横浜のWebデザインスクール一覧 </a> </li> <li class="article-text-list__item"> <a class="article-text-list__link" href="https://webdesigner-go.com/study/osaka-webdesign-school/"> 大阪のWebデザインスクール一覧 </a> </li> <li class="article-text-list__item"> <a class="article-text-list__link" href="https://webdesigner-go.com/study/nagoya-webdesign-school/"> 名古屋のWebデザインスクール一覧 </a> </li> <li class="article-text-list__item"> <a class="article-text-list__link" href="https://webdesigner-go.com/study/online/"> オンラインスクールでWebデザインを学ぶ </a> </li> <li class="article-text-list__item"> <a class="article-text-list__link" href="https://webdesigner-go.com/study/mum/"> 【もう騙されない】ママ・主婦向けのWebデザインスクールの紹介 </a> </li> <li class="article-text-list__item"> <a class="article-text-list__link" href="https://webdesigner-go.com/study/famm/"> 怪しい？ママ向けWebデザインスクール『Famm』をプロが徹底解説！評判と口コミも一挙紹介 </a> </li> <li class="article-text-list__item"> <a class="article-text-list__link" href="https://webdesigner-go.com/study/adobe/"> 裏技？AdobeCreativeCloudを安く入手する方法 </a> </li> <li class="article-text-list__item"> <a class="article-text-list__link" href="https://webdesigner-go.com/study/school-for-the-challenged/"> 障害を抱える方向けの無料Webデザインスクールや働き方について </a> </li> <li class="article-text-list__item"> <a class="article-text-list__link" href="https://webdesigner-go.com/study/self-taught/"> 独学でWebデザインを勉強するための完全ガイド </a> </li> <li class="article-text-list__item"> <a class="article-text-list__link" href="https://webdesigner-go.com/study/book/"> 【初心者向け】Webデザイン勉強のおすすめ本 </a> </li> <li class="article-text-list__item"> <a class="article-text-list__link" href="https://webdesigner-go.com/study/kindle-unlimited/"> Webデザイン関連の本をKindle Unlimitedで無料で読もう！オススメの本を紹介 </a> </li> <li class="article-text-list__item"> <a class="article-text-list__link" href="https://webdesigner-go.com/study/free-programming-school/"> 無料のプログラミングスクールを検討してみよう！ </a> </li> <li class="article-text-list__item"> <a class="article-text-list__link" href="https://webdesigner-go.com/study/college-student-programming-school/"> 【無料あり】大学生も受講できるプログラミングスクール完全ガイド！学割もチェック </a> </li> <li class="article-text-list__item"> <a class="article-text-list__link" href="https://webdesigner-go.com/study/programming-school-price/"> プログラミングスクール23校の料金比較。無料スクールか求職者支援訓練に通おう！ </a> </li> <li class="article-text-list__item"> <a class="article-text-list__link" href="https://webdesigner-go.com/study/programmer-college-interview/"> プログラマカレッジ完全ガイド。キャリアアドバイザーと講師による徹底解説。 </a> </li> <li class="article-text-list__item"> <a class="article-text-list__link" href="https://webdesigner-go.com/study/programmercollege/"> 【体験談】『プログラマカレッジ』卒業生のS.Kさんにインタビュー！ </a> </li> <li class="article-text-list__item"> <a class="article-text-list__link" href="https://webdesigner-go.com/study/webdesigner-license/"> Webデザイナーになるには資格は必要？ </a> </li> <li class="article-text-list__item"> <a class="article-text-list__link" href="https://webdesigner-go.com/study/how-to-improve-design-skill/"> デザイン力を最短最速で向上させる方法 </a> </li> <li class="article-text-list__item"> <a class="article-text-list__link" href="https://webdesigner-go.com/study/necopon-cowork/"> ねこポンコワークスペース＠新宿のご案内 </a> </li> </ul> </div> </section> <section class="section section-job"> <div class="section-heading"> <h2 class="section-heading__title"> 転職テクニック </h2> </div> <div class="section__body"> <ul class="article-text-list"> <li class="article-text-list__item"> <a class="article-text-list__link" href="https://webdesigner-go.com/job/how-to-become-webdesigner/"> 全くの未経験からWebデザイナーになれるのか不安な方へ </a> </li> <li class="article-text-list__item"> <a class="article-text-list__link" href="https://webdesigner-go.com/job/fun-life/"> 会社がつらい…行きたくない人にほどWebデザイナーになってほしい </a> </li> <li class="article-text-list__item"> <a class="article-text-list__link" href="https://webdesigner-go.com/job/best-step-to-becoming-webdesigner/"> 業界未経験からWebデザイナーになるためのベストなステップ </a> </li> <li class="article-text-list__item"> <a class="article-text-list__link" href="https://webdesigner-go.com/job/fail/"> Webデザイナーの転職で失敗する人の特徴 </a> </li> <li class="article-text-list__item"> <a class="article-text-list__link" href="https://webdesigner-go.com/job/success/"> Webデザイナーの転職を成功させるコツ！ </a> </li> <li class="article-text-list__item"> <a class="article-text-list__link" href="https://webdesigner-go.com/job/age/"> 30代未経験でもWebデザイナーになれる？年齢別アドバイス </a> </li> <li class="article-text-list__item"> <a class="article-text-list__link" href="https://webdesigner-go.com/job/shufu/"> 主婦・ママが未経験からWebデザイナーになるための方法 </a> </li> <li class="article-text-list__item"> <a class="article-text-list__link" href="https://webdesigner-go.com/job/portfolio/"> 【完全解説】Webデザイナー用のポートフォリオの作り方 </a> </li> <li class="article-text-list__item"> <a class="article-text-list__link" href="https://webdesigner-go.com/job/find/"> 未経験OKのWebデザイナーの求人を見つける方法 </a> </li> <li class="article-text-list__item"> <a class="article-text-list__link" href="https://webdesigner-go.com/job/agent/"> 未経験のWebデザイナーが登録しておくべき転職エージェント </a> </li> <li class="article-text-list__item"> <a class="article-text-list__link" href="https://webdesigner-go.com/job/agents/"> Webデザイナー用の転職エージェント一覧 </a> </li> <li class="article-text-list__item"> <a class="article-text-list__link" href="https://webdesigner-go.com/job/workport-interview/"> 未経験でもWeb系職種を紹介可能なワークポートにインタビュー！ </a> </li> <li class="article-text-list__item"> <a class="article-text-list__link" href="https://webdesigner-go.com/job/green-findjob/"> Webデザイナー向け転職サイト『Green』を利用しよう </a> </li> <li class="article-text-list__item"> <a class="article-text-list__link" href="https://webdesigner-go.com/job/agent-portfolio/"> 転職エージェントは使えない？まずはポートフォリオを見直そう！ </a> </li> <li class="article-text-list__item"> <a class="article-text-list__link" href="https://webdesigner-go.com/job/agent1-2/"> １〜２年目の経験の浅いWebデザイナー向けの転職活動の方法 </a> </li> <li class="article-text-list__item"> <a class="article-text-list__link" href="https://webdesigner-go.com/job/haken/"> 未経験から派遣のWebデザイナーになるのは要注意 </a> </li> <li class="article-text-list__item"> <a class="article-text-list__link" href="https://webdesigner-go.com/job/ses/"> SESへの転職はやめたほうがいいです </a> </li> <li class="article-text-list__item"> <a class="article-text-list__link" href="https://webdesigner-go.com/job/web-jobs/"> 【Web系へ転職したい方へ】Web業界の職種を解説 </a> </li> <li class="article-text-list__item"> <a class="article-text-list__link" href="https://webdesigner-go.com/job/typical-questions-answer/"> 【面接対策】Webデザイナーの面接で聞かれるリアルな質問20個とその回答例 </a> </li> <li class="article-text-list__item"> <a class="article-text-list__link" href="https://webdesigner-go.com/job/last-question/"> 【面接対策】「何か質問はありますか？」に対する質問10個 </a> </li> <li class="article-text-list__item"> <a class="article-text-list__link" href="https://webdesigner-go.com/job/reason/"> 【面接対策】Webデザイナーの志望動機の伝え方と例 </a> </li> <li class="article-text-list__item"> <a class="article-text-list__link" href="https://webdesigner-go.com/job/pr/"> 未経験Webデザイナーの最強の自己PR文の書き方【例文あり】 </a> </li> <li class="article-text-list__item"> <a class="article-text-list__link" href="https://webdesigner-go.com/job/saitama/"> 埼玉で未経験からWebデザイナーになる鉄板の方法！ </a> </li> <li class="article-text-list__item"> <a class="article-text-list__link" href="https://webdesigner-go.com/job/chiba/"> 千葉で未経験からWebデザイナーになる鉄板の方法！ </a> </li> <li class="article-text-list__item"> <a class="article-text-list__link" href="https://webdesigner-go.com/job/college-student/"> 大学生が新卒でWebデザイナーになる方法 </a> </li> <li class="article-text-list__item"> <a class="article-text-list__link" href="https://webdesigner-go.com/job/tokyo/"> Webデザイナーになるなら一度は東京に来たほうがいい。上京のススメ。 </a> </li> <li class="article-text-list__item"> <a class="article-text-list__link" href="https://webdesigner-go.com/job/ideal-webdesign-company/"> 未経験の方にとって理想のWeb制作会社とは？ </a> </li> <li class="article-text-list__item"> <a class="article-text-list__link" href="https://webdesigner-go.com/job/designer/"> 未経験から「デザイナー」になる方法 </a> </li> <li class="article-text-list__item"> <a class="article-text-list__link" href="https://webdesigner-go.com/job/web-director/"> 未経験から「Webディレクター」になる方法 </a> </li> <li class="article-text-list__item"> <a class="article-text-list__link" href="https://webdesigner-go.com/job/coder/"> 未経験から「コーダー」になる方法 </a> </li> <li class="article-text-list__item"> <a class="article-text-list__link" href="https://webdesigner-go.com/job/web-developer/"> 未経験から「Webエンジニア」になる方法 </a> </li> <li class="article-text-list__item"> <a class="article-text-list__link" href="https://webdesigner-go.com/job/best-company/"> 新人Webデザイナーにとってベストな職場 </a> </li> <li class="article-text-list__item"> <a class="article-text-list__link" href="https://webdesigner-go.com/job/3day-agent/"> 【本音】実際に使ってみた週３勤務可能なフリーランス専門エージェント７社の個人的ランキング </a> </li> <li class="article-text-list__item"> <a class="article-text-list__link" href="https://webdesigner-go.com/job/get-into-web-industry/"> 手っ取り早くWeb業界に就職・転職する3つの裏技的な方法 </a> </li> <li class="article-text-list__item"> <a class="article-text-list__link" href="https://webdesigner-go.com/job/question/"> 【無料】Webデザイナーを目指す方の転職相談を受付中！悩みや質問をぶつけてください♪ </a> </li> </ul> </div> </section> <section class="section section-portfolio"> <div class="section-heading"> <h2 class="section-heading__title"> ポートフォリオ制作講座 </h2> </div> <div class="section__body"> <ul class="article-text-list"> <li class="article-text-list__item"> <a class="article-text-list__link" href="https://webdesigner-go.com/portfolio/real-portfolio"> 僕のポートフォリオサイトを公開 </a> </li> <li class="article-text-list__item"> <a class="article-text-list__link" href="https://webdesigner-go.com/portfolio/profile"> ポートフォリオの自己紹介の書き方 </a> </li> <li class="article-text-list__item"> <a class="article-text-list__link" href="https://webdesigner-go.com/portfolio/idea"> ポートフォリオに掲載する作品のアイデアが浮かばない？アイデア出しの方法 </a> </li> <li class="article-text-list__item"> <a class="article-text-list__link" href="https://webdesigner-go.com/portfolio/game"> ゲーム・エンタメ系サイトのデザイン方法【ポートフォリオ作品例】 </a> </li> <li class="article-text-list__item"> <a class="article-text-list__link" href="https://webdesigner-go.com/portfolio/fashion"> ファッションサイトのデザイン方法【ポートフォリオ作品例】 </a> </li> <li class="article-text-list__item"> <a class="article-text-list__link" href="https://webdesigner-go.com/portfolio/school"> 幼稚園・学校サイトのデザイン方法【ポートフォリオ作品例】 </a> </li> <li class="article-text-list__item"> <a class="article-text-list__link" href="https://webdesigner-go.com/portfolio/hairsalon"> 美容院サイトのデザイン方法【ポートフォリオ作品例】 </a> </li> <li class="article-text-list__item"> <a class="article-text-list__link" href="https://webdesigner-go.com/portfolio/wa"> 和風サイトのデザイン方法【ポートフォリオ作品例】 </a> </li> <li class="article-text-list__item"> <a class="article-text-list__link" href="https://webdesigner-go.com/portfolio/gym"> パーソナルジムサイトのデザイン方法【ポートフォリオ作品例】 </a> </li> <li class="article-text-list__item"> <a class="article-text-list__link" href="https://webdesigner-go.com/portfolio/wix"> Wixでポートフォリオサイトを作ってみた！案件獲得方法も紹介 </a> </li> </ul> </div> </section> <section class="section section-workstation"> <div class="section-heading"> <h2 class="section-heading__title"> 快適な制作環境 </h2> </div> <div class="section__body"> <ul class="article-text-list"> <li class="article-text-list__item"> <a class="article-text-list__link" href="https://webdesigner-go.com/workstation/favorite-items/"> Webデザイナーが買って本当によかったオススメのものを紹介 </a> </li> <li class="article-text-list__item"> <a class="article-text-list__link" href="https://webdesigner-go.com/workstation/pc/"> Webデザイナーに必要なパソコンの性能 </a> </li> <li class="article-text-list__item"> <a class="article-text-list__link" href="https://webdesigner-go.com/workstation/windows-mac/"> WebデザイナーはMacかWindowsのどちらを選ぶべきか？ </a> </li> <li class="article-text-list__item"> <a class="article-text-list__link" href="https://webdesigner-go.com/workstation/desktop-or-laptop/"> デスクトップかノートパソコンか？メリットとデメリット </a> </li> <li class="article-text-list__item"> <a class="article-text-list__link" href="https://webdesigner-go.com/workstation/server/"> Webデザイナーにおすすめのレンタルサーバー </a> </li> <li class="article-text-list__item"> <a class="article-text-list__link" href="https://webdesigner-go.com/workstation/how-to-get-font/"> フォントのお得な入手方法 </a> </li> <li class="article-text-list__item"> <a class="article-text-list__link" href="https://webdesigner-go.com/workstation/bookmark-bar/"> これでスッキリ！ブックマークバーの整理方法 </a> </li> <li class="article-text-list__item"> <a class="article-text-list__link" href="https://webdesigner-go.com/workstation/eyeware/"> Webデザイン用にPCメガネを購入しよう </a> </li> <li class="article-text-list__item"> <a class="article-text-list__link" href="https://webdesigner-go.com/workstation/dev/"> PCの中にローカル環境（テストサーバー）を作ろう </a> </li> </ul> </div> </section> <section class="section section-proskill"> <div class="section-heading"> <h2 class="section-heading__title"> プロのノウハウ </h2> </div> <div class="section__body"> <ul class="article-text-list"> <li class="article-text-list__item"> <a class="article-text-list__link" href="https://webdesigner-go.com/proskill/googlechrome/"> Webデザイナーの必需品！Google Chromeブラウザの開発者ツールの使い方 </a> </li> <li class="article-text-list__item"> <a class="article-text-list__link" href="https://webdesigner-go.com/proskill/font/"> Webデザインの現場で使う定番フォント </a> </li> <li class="article-text-list__item"> <a class="article-text-list__link" href="https://webdesigner-go.com/proskill/jpg-png%e3%82%92webp%e3%81%ab%e5%a4%89%e6%8f%9b%e3%81%99%e3%82%8b%e3%83%84%e3%83%bc%e3%83%ab/"> JPG/PNGをWebPに変換するツール </a> </li> <li class="article-text-list__item"> <a class="article-text-list__link" href="https://webdesigner-go.com/proskill/photoshop-reverse/"> Photoshopで要素を一瞬で左右反転する方法 </a> </li> <li class="article-text-list__item"> <a class="article-text-list__link" href="https://webdesigner-go.com/proskill/must-have-chrome-extensions/"> Webデザイナーが入れているChromeのアドオン５選 </a> </li> <li class="article-text-list__item"> <a class="article-text-list__link" href="https://webdesigner-go.com/proskill/slack-backlog/"> コミュニケーションツール「Slack」と「Backlog」 </a> </li> <li class="article-text-list__item"> <a class="article-text-list__link" href="https://webdesigner-go.com/proskill/event/"> Webデザイナーにおすすめのイベント＆交流会 </a> </li> <li class="article-text-list__item"> <a class="article-text-list__link" href="https://webdesigner-go.com/proskill/coding-tools/"> コーディングを超ラクにしてくれる便利サイト </a> </li> <li class="article-text-list__item"> <a class="article-text-list__link" href="https://webdesigner-go.com/proskill/free-stock-photos/"> プロのWebデザイナーが使う商用OKのフリー素材サイト </a> </li> </ul> </div> </section> <section class="section section-rule"> <div class="section-heading"> <h2 class="section-heading__title"> ルールや心得 </h2> </div> <div class="section__body"> <ul class="article-text-list"> <li class="article-text-list__item"> <a class="article-text-list__link" href="https://webdesigner-go.com/rule/how-to-call-width/"> widthやrelativeの読み方 </a> </li> <li class="article-text-list__item"> <a class="article-text-list__link" href="https://webdesigner-go.com/rule/font-size/"> font-sizeは10px以上にしよう </a> </li> <li class="article-text-list__item"> <a class="article-text-list__link" href="https://webdesigner-go.com/rule/basic/"> サイトにパスワードをかけるBasic認証の設定方法 </a> </li> <li class="article-text-list__item"> <a class="article-text-list__link" href="https://webdesigner-go.com/rule/black/"> 黒の文字色は#333で設定 </a> </li> <li class="article-text-list__item"> <a class="article-text-list__link" href="https://webdesigner-go.com/rule/test/"> 複数デバイスでの検証を怠らない </a> </li> <li class="article-text-list__item"> <a class="article-text-list__link" href="https://webdesigner-go.com/rule/who-owns-psd-file/"> PSD/Aiファイルはタダでクライアントにあげない </a> </li> <li class="article-text-list__item"> <a class="article-text-list__link" href="https://webdesigner-go.com/rule/material/"> テキスト原稿は必ずコピペしよう </a> </li> <li class="article-text-list__item"> <a class="article-text-list__link" href="https://webdesigner-go.com/rule/stock-photo/"> 無料素材と有料素材の注意点：著作権とウォーターマーク </a> </li> <li class="article-text-list__item"> <a class="article-text-list__link" href="https://webdesigner-go.com/rule/photoshop-layer/"> Photoshopのレイヤーはグループ分けしておく </a> </li> <li class="article-text-list__item"> <a class="article-text-list__link" href="https://webdesigner-go.com/rule/psd/"> PSDのファイルはできる限り軽くしておく </a> </li> <li class="article-text-list__item"> <a class="article-text-list__link" href="https://webdesigner-go.com/rule/embed-javascript/"> JavaScriptのファイルはbodyの最後で読み込む </a> </li> </ul> </div> </section> <section class="section section-web_marketing"> <div class="section-heading"> <h2 class="section-heading__title"> Webマーケティング </h2> </div> <div class="section__body"> <ul class="article-text-list"> <li class="article-text-list__item"> <a class="article-text-list__link" href="https://webdesigner-go.com/web_marketing/reason/"> WebデザイナーにもWebマーケティングのスキルが必要な時代に </a> </li> <li class="article-text-list__item"> <a class="article-text-list__link" href="https://webdesigner-go.com/web_marketing/book/"> Webマーケティングの基本はこれで習得！面白すぎる２冊の本 </a> </li> </ul> </div> </section> <section class="section section-template"> <div class="section-heading"> <h2 class="section-heading__title"> テンプレート </h2> </div> <div class="section__body"> <ul class="article-text-list"> <li class="article-text-list__item"> <a class="article-text-list__link" href="https://webdesigner-go.com/template/portfolio-basic-wordpress/"> ポートフォリオ用WordPressテーマ『PORTFOLIOベーシック』 </a> </li> <li class="article-text-list__item"> <a class="article-text-list__link" href="https://webdesigner-go.com/template/portfolio-basic-wordpress-usage/"> ポートフォリオ用WordPressテーマ『PORTFOLIOベーシック』マニュアル </a> </li> <li class="article-text-list__item"> <a class="article-text-list__link" href="https://webdesigner-go.com/template/lolipop/"> ロリポップでレンタルサーバーを契約してWordPressをインストール方法を解説 </a> </li> <li class="article-text-list__item"> <a class="article-text-list__link" href="https://webdesigner-go.com/template/coding-start/"> 【無料】デザインカンプからのコーディング練習教材（入門編） </a> </li> <li class="article-text-list__item"> <a class="article-text-list__link" href="https://webdesigner-go.com/template/coding-beginner/"> 【無料】デザインカンプからのコーディング練習教材（初級編） </a> </li> <li class="article-text-list__item"> <a class="article-text-list__link" href="https://webdesigner-go.com/template/portfolio-02/"> 【無料】ポートフォリオHTMLテンプレート（ベーシック） </a> </li> <li class="article-text-list__item"> <a class="article-text-list__link" href="https://webdesigner-go.com/template/portfolio/"> 【無料】ポートフォリオHTMLテンプレート（ガーリー） </a> </li> <li class="article-text-list__item"> <a class="article-text-list__link" href="https://webdesigner-go.com/template/portfolio-03/"> 【無料】ポートフォリオHTMLテンプレート（ビジュアル） </a> </li> <li class="article-text-list__item"> <a class="article-text-list__link" href="https://webdesigner-go.com/template/portfolio-04/"> 【無料】ポートフォリオHTMLテンプレート（スプリットスクリーン） </a> </li> <li class="article-text-list__item"> <a class="article-text-list__link" href="https://webdesigner-go.com/template/banner-psd/"> 【無料】バナー作成テンプレート（PSD） </a> </li> <li class="article-text-list__item"> <a class="article-text-list__link" href="https://webdesigner-go.com/template/psd-corporate/"> 【無料】コーポレートサイトのデザインテンプレート（PSD） </a> </li> <li class="article-text-list__item"> <a class="article-text-list__link" href="https://webdesigner-go.com/template/psd-game/"> 【無料】ゲーム・エンタメサイトのデザインテンプレート（PSD） </a> </li> <li class="article-text-list__item"> <a class="article-text-list__link" href="https://webdesigner-go.com/template/psd-fashion/"> 【無料】ファッションサイトのデザインテンプレート（PSD） </a> </li> <li class="article-text-list__item"> <a class="article-text-list__link" href="https://webdesigner-go.com/template/psd-school/"> 【無料】幼稚園・学校サイトのデザインテンプレート（PSD） </a> </li> <li class="article-text-list__item"> <a class="article-text-list__link" href="https://webdesigner-go.com/template/psd-hairsalon/"> 【無料】美容院サイトのデザインテンプレート（PSD） </a> </li> <li class="article-text-list__item"> <a class="article-text-list__link" href="https://webdesigner-go.com/template/psd-wa/"> 【無料】和風サイトのデザインテンプレート（PSD） </a> </li> <li class="article-text-list__item"> <a class="article-text-list__link" href="https://webdesigner-go.com/template/psd-gym/"> 【無料】パーソナルジムサイトのデザインテンプレート（PSD） </a> </li> <li class="article-text-list__item"> <a class="article-text-list__link" href="https://webdesigner-go.com/template/syogatu-sozai/"> 【無料】正月の筆文字素材パック </a> </li> <li class="article-text-list__item"> <a class="article-text-list__link" href="https://webdesigner-go.com/template/reiwa/"> 【無料】令和 – 筆文字（JPG／PNG／Ai） </a> </li> </ul> </div> </section> </section> </div> <aside class="sidebar"> <section class="side-section"> <h2 class="side-section-heading__title"> 管理人（ねこポン）について </h2> <div class="side-profile"> <div class="side-profile__img"> <img src="https://webdesigner-go.com/wp-content/themes/webdesigner/img/profile.webp" width="120" height="104" alt="ねこポン"> </div> <div class="side-profile__desc"> <p>週３日だけ会社で働く30代後半ウェブデザイナーです！<br>インテリ風＆仕事できる風を醸し出す腕前では右に出る者はいませんが、電話すら怖くて取れないし、無断欠勤してしまい自宅に警察が来たほどのコミュ症ポンコツ人間です。<br>現在Web業界10年目。求職者支援訓練を卒業後、事業会社とWeb制作会社のウェブデザイナーを経て、フリーランスになりました。<br><a href="/about-me">★ 僕の20代まるごと黒歴史ストーリー</a></p> <p class="youtube"><iframe class="youtube__iframe" data-src="https://www.youtube.com/embed/d36LEN_iRZk" frameborder="0" allowfullscreen="" loading="lazy"></iframe></p> <p>ちょこっと『月曜から夜ふかし』に出演しました。</p> <p class="img-wrapper"><a href="https://dating-simulator.com/" target="_blank" rel="noopener"><img src="https://webdesigner-go.com/wp-content/themes/webdesigner/img/bnr_dating-simulator.webp" width="1200" height="630" alt="デートシミュレーター佐藤翔100の質問"></a></p> <p>Vue.jsで僕だけが登場する恋愛シミュレーションゲームを作りました。</p> <p class="img-wrapper"> <a href="https://necopo.com/" onclick="ga('send', 'event', 'link','click', 'AD_profile_necopo')"><img width="1080" height="1080" src="https://webdesigner-go.com/wp-content/themes/webdesigner/img/bnr_necopo.webp" alt="月額費用不要！自分で更新ができる！ホームページ制作。新宿区高田馬場のフリーランスWebデザイナーねこポッポ"></a> <p>ホームページ制作のご依頼は <a href="https://necopo.com/" onclick="ga('send', 'event', 'link','click', 'AD_profile_necopo')">こちら</a>からご連絡ください。 </p> </p> </div> </div> </section> <section class="side-section"> <h2 class="side-section-heading__title"> ねこポンブログ </h2> <div class="article-list"> <ul class="article-list__list"> <li class="article-list__item"> <a class="article-list__link" href="https://webdesigner-go.com/works/yorimichi/"> <div class="article-list__thumb"> <img width="300" height="158" src="https://webdesigner-go.com/wp-content/uploads/2024/11/works_yorimichi-300x158.webp" class="attachment-sm size-sm wp-post-image" alt="" decoding="async" srcset="https://webdesigner-go.com/wp-content/uploads/2024/11/works_yorimichi-300x158.webp 300w, https://webdesigner-go.com/wp-content/uploads/2024/11/works_yorimichi-1000x525.webp 1000w, https://webdesigner-go.com/wp-content/uploads/2024/11/works_yorimichi-800x420.webp 800w" sizes="(max-width: 300px) 100vw, 300px" /> </div> <div class="article-list__body"> <p class="article-list__title">【制作事例】マッサージ・整体の施術院のサイトを制作しました</p> <p class="article-list__date">2024.11.24</p> </div> </a> </li> <li class="article-list__item"> <a class="article-list__link" href="https://webdesigner-go.com/works/swell-nijiiro-clinic/"> <div class="article-list__thumb"> <img width="300" height="158" src="https://webdesigner-go.com/wp-content/uploads/2024/10/works-nijicl-300x158.webp" class="attachment-sm size-sm wp-post-image" alt="" decoding="async" srcset="https://webdesigner-go.com/wp-content/uploads/2024/10/works-nijicl-300x158.webp 300w, https://webdesigner-go.com/wp-content/uploads/2024/10/works-nijicl-1000x525.webp 1000w, https://webdesigner-go.com/wp-content/uploads/2024/10/works-nijicl-800x420.webp 800w" sizes="(max-width: 300px) 100vw, 300px" /> </div> <div class="article-list__body"> <p class="article-list__title">【制作事例】SWELLで皮膚科クリニックサイトを制作しました</p> <p class="article-list__date">2024.10.17</p> </div> </a> </li> <li class="article-list__item"> <a class="article-list__link" href="https://webdesigner-go.com/news/ikemen-ranking2024/"> <div class="article-list__thumb"> <img width="300" height="158" src="https://webdesigner-go.com/wp-content/uploads/2024/05/ikemen-ranking-300x158.webp" class="attachment-sm size-sm wp-post-image" alt="" decoding="async" srcset="https://webdesigner-go.com/wp-content/uploads/2024/05/ikemen-ranking-300x158.webp 300w, https://webdesigner-go.com/wp-content/uploads/2024/05/ikemen-ranking-1000x525.webp 1000w, https://webdesigner-go.com/wp-content/uploads/2024/05/ikemen-ranking-800x420.webp 800w" sizes="(max-width: 300px) 100vw, 300px" /> </div> <div class="article-list__body"> <p class="article-list__title">『イケメンランキング日本一・世界一のイケメン2024』の公式サイトを制作しました</p> <p class="article-list__date">2024.05.13</p> </div> </a> </li> <li class="article-list__item"> <a class="article-list__link" href="https://webdesigner-go.com/news/unmeiotoko/"> <div class="article-list__thumb"> <img width="300" height="158" src="https://webdesigner-go.com/wp-content/uploads/2024/05/ogp-300x158.webp" class="attachment-sm size-sm wp-post-image" alt="" decoding="async" srcset="https://webdesigner-go.com/wp-content/uploads/2024/05/ogp-300x158.webp 300w, https://webdesigner-go.com/wp-content/uploads/2024/05/ogp-1024x538.webp 1024w, https://webdesigner-go.com/wp-content/uploads/2024/05/ogp-150x79.webp 150w, https://webdesigner-go.com/wp-content/uploads/2024/05/ogp-768x403.webp 768w, https://webdesigner-go.com/wp-content/uploads/2024/05/ogp-1000x525.webp 1000w, https://webdesigner-go.com/wp-content/uploads/2024/05/ogp-800x420.webp 800w, https://webdesigner-go.com/wp-content/uploads/2024/05/ogp.webp 1200w" sizes="(max-width: 300px) 100vw, 300px" /> </div> <div class="article-list__body"> <p class="article-list__title">Vue.jsで『運命の人占い』を開発しました。完全無料です！</p> <p class="article-list__date">2024.05.12</p> </div> </a> </li> <li class="article-list__item"> <a class="article-list__link" href="https://webdesigner-go.com/news/kekkonsoudanjo/"> <div class="article-list__thumb"> <img width="300" height="158" src="https://webdesigner-go.com/wp-content/uploads/2024/05/ogp-1-300x158.webp" class="attachment-sm size-sm wp-post-image" alt="" decoding="async" srcset="https://webdesigner-go.com/wp-content/uploads/2024/05/ogp-1-300x158.webp 300w, https://webdesigner-go.com/wp-content/uploads/2024/05/ogp-1-1024x538.webp 1024w, https://webdesigner-go.com/wp-content/uploads/2024/05/ogp-1-150x79.webp 150w, https://webdesigner-go.com/wp-content/uploads/2024/05/ogp-1-768x403.webp 768w, https://webdesigner-go.com/wp-content/uploads/2024/05/ogp-1-1000x525.webp 1000w, https://webdesigner-go.com/wp-content/uploads/2024/05/ogp-1-800x420.webp 800w, https://webdesigner-go.com/wp-content/uploads/2024/05/ogp-1.webp 1200w" sizes="(max-width: 300px) 100vw, 300px" /> </div> <div class="article-list__body"> <p class="article-list__title">Vue.jsで『無料結婚相談所』を開発しました。完全無料です！</p> <p class="article-list__date">2024.05.11</p> </div> </a> </li> <li class="article-list__item"> <a class="article-list__link" href="https://webdesigner-go.com/news/youtube%e3%83%81%e3%83%a3%e3%83%b3%e3%83%8d%e3%83%ab%e3%82%92%e9%96%8b%e8%a8%ad%e3%81%97%e3%81%be%e3%81%97%e3%81%9f/"> <div class="article-list__thumb"> <img width="300" height="158" src="https://webdesigner-go.com/wp-content/uploads/2024/05/youtube-300x158.webp" class="attachment-sm size-sm wp-post-image" alt="" decoding="async" srcset="https://webdesigner-go.com/wp-content/uploads/2024/05/youtube-300x158.webp 300w, https://webdesigner-go.com/wp-content/uploads/2024/05/youtube-1024x538.webp 1024w, https://webdesigner-go.com/wp-content/uploads/2024/05/youtube-150x79.webp 150w, https://webdesigner-go.com/wp-content/uploads/2024/05/youtube-768x403.webp 768w, https://webdesigner-go.com/wp-content/uploads/2024/05/youtube-1000x525.webp 1000w, https://webdesigner-go.com/wp-content/uploads/2024/05/youtube-800x420.webp 800w, https://webdesigner-go.com/wp-content/uploads/2024/05/youtube.webp 1200w" sizes="(max-width: 300px) 100vw, 300px" /> </div> <div class="article-list__body"> <p class="article-list__title">YouTubeチャンネルを開設しました</p> <p class="article-list__date">2024.05.10</p> </div> </a> </li> <li class="article-list__item"> <a class="article-list__link" href="https://webdesigner-go.com/ai/lora/"> <div class="article-list__thumb"> <img width="300" height="158" src="https://webdesigner-go.com/wp-content/uploads/2024/03/thumb_lora-300x158.webp" class="attachment-sm size-sm wp-post-image" alt="" decoding="async" srcset="https://webdesigner-go.com/wp-content/uploads/2024/03/thumb_lora-300x158.webp 300w, https://webdesigner-go.com/wp-content/uploads/2024/03/thumb_lora-1024x538.webp 1024w, https://webdesigner-go.com/wp-content/uploads/2024/03/thumb_lora-150x79.webp 150w, https://webdesigner-go.com/wp-content/uploads/2024/03/thumb_lora-768x403.webp 768w, https://webdesigner-go.com/wp-content/uploads/2024/03/thumb_lora-1000x525.webp 1000w, https://webdesigner-go.com/wp-content/uploads/2024/03/thumb_lora-800x420.webp 800w, https://webdesigner-go.com/wp-content/uploads/2024/03/thumb_lora.webp 1200w" sizes="(max-width: 300px) 100vw, 300px" /> </div> <div class="article-list__body"> <p class="article-list__title">自分の顔のLoRAを作成しAI画像を生成したら笑えた</p> <p class="article-list__date">2024.03.23</p> </div> </a> </li> </ul> </div> <div class="side-section__btn"> <a class="btn btn--type02 btn--w100" href="https://webdesigner-go.com/blog">ブログ記事一覧</a> </div> </section> <section class="side-section"> <h2 class="side-section-heading__title"> なんでも質問受付中 (^o^) /♪ </h2> <div class="side-section__body"> <div class="recent-comments"> <ul id="better-recent-comments" class="recent-comments-list with-avatars"><li class="recentcomments recent-comment"><div class="comment-wrap" style="padding-left:38px; min-height:34px;"><span class="comment-avatar"><img alt='' src='https://secure.gravatar.com/avatar/2615ac07f7b5258d8ab1eea6c99b778c?s=30&d=mm&r=g' srcset='https://secure.gravatar.com/avatar/2615ac07f7b5258d8ab1eea6c99b778c?s=60&d=mm&r=g 2x' class='avatar avatar-30 photo' height='30' width='30' decoding='async'/></span> <span class="comment-author-link">あいす</span> : <span class="comment-post"><a href="https://webdesigner-go.com/job/best-company/#comment-1992">新人Webデザイナーにとってベストな職場</a></span>: “<span class="comment-excerpt">はじめまして！Webデザインのスクールを検索した際に、こちらのサイトを拝見し、改…</span>” <span class="comment-date">2025.02.19 08:36</span></div></li><li class="recentcomments recent-comment"><div class="comment-wrap" style="padding-left:38px; min-height:34px;"><span class="comment-avatar"><img alt='' src='https://secure.gravatar.com/avatar/36c1db10cdf41d2b0dd9dcea26df5910?s=30&d=mm&r=g' srcset='https://secure.gravatar.com/avatar/36c1db10cdf41d2b0dd9dcea26df5910?s=60&d=mm&r=g 2x' class='avatar avatar-30 photo' height='30' width='30' decoding='async'/></span> <span class="comment-author-link">rima</span> : <span class="comment-post"><a href="https://webdesigner-go.com/job/best-company/#comment-1991">新人Webデザイナーにとってベストな職場</a></span>: “<span class="comment-excerpt">ねこポンさんいつもありがとうございます、お礼が遅くなりすみません。ご…</span>” <span class="comment-date">2025.02.18 07:23</span></div></li><li class="recentcomments recent-comment"><div class="comment-wrap" style="padding-left:38px; min-height:34px;"><span class="comment-avatar"><img alt='' src='https://secure.gravatar.com/avatar/ceae25702700c5d88e032c0e80352ad4?s=30&d=mm&r=g' srcset='https://secure.gravatar.com/avatar/ceae25702700c5d88e032c0e80352ad4?s=60&d=mm&r=g 2x' class='avatar avatar-30 photo' height='30' width='30' decoding='async'/></span> <span class="comment-author-link">ねこポン</span> : <span class="comment-post"><a href="https://webdesigner-go.com/job/best-company/#comment-1990">新人Webデザイナーにとってベストな職場</a></span>: “<span class="comment-excerpt">rimaさん、おひさしぶりです！遅くなってしまいすみません。それは悩まし…</span>” <span class="comment-date">2025.02.13 13:32</span></div></li><li class="recentcomments recent-comment"><div class="comment-wrap" style="padding-left:38px; min-height:34px;"><span class="comment-avatar"><img alt='' src='https://secure.gravatar.com/avatar/36c1db10cdf41d2b0dd9dcea26df5910?s=30&d=mm&r=g' srcset='https://secure.gravatar.com/avatar/36c1db10cdf41d2b0dd9dcea26df5910?s=60&d=mm&r=g 2x' class='avatar avatar-30 photo' height='30' width='30' decoding='async'/></span> <span class="comment-author-link">rima</span> : <span class="comment-post"><a href="https://webdesigner-go.com/job/best-company/#comment-1989">新人Webデザイナーにとってベストな職場</a></span>: “<span class="comment-excerpt">転職の決断について相談させてください。ねこポンさん、こんにちは。以前ご相談し…</span>” <span class="comment-date">2025.02.08 11:13</span></div></li><li class="recentcomments recent-comment"><div class="comment-wrap" style="padding-left:38px; min-height:34px;"><span class="comment-avatar"><img alt='' src='https://secure.gravatar.com/avatar/ceae25702700c5d88e032c0e80352ad4?s=30&d=mm&r=g' srcset='https://secure.gravatar.com/avatar/ceae25702700c5d88e032c0e80352ad4?s=60&d=mm&r=g 2x' class='avatar avatar-30 photo' height='30' width='30' decoding='async'/></span> <span class="comment-author-link">ねこポン</span> : <span class="comment-post"><a href="https://webdesigner-go.com/skill/skills-webdesigner-must-have/#comment-1988">最初にチェック！Webデザイナーに転職する前に最低限持つべきスキル一覧</a></span>: “<span class="comment-excerpt">さといもさん、はじめまして！このサイトが少しでもお力になれて嬉しいです。職…</span>” <span class="comment-date">2025.02.08 02:24</span></div></li><li class="recentcomments recent-comment"><div class="comment-wrap" style="padding-left:38px; min-height:34px;"><span class="comment-avatar"><img alt='' src='https://secure.gravatar.com/avatar/ab288e8cbd941244e86b21453a7a5deb?s=30&d=mm&r=g' srcset='https://secure.gravatar.com/avatar/ab288e8cbd941244e86b21453a7a5deb?s=60&d=mm&r=g 2x' class='avatar avatar-30 photo' height='30' width='30' decoding='async'/></span> <span class="comment-author-link">さといも</span> : <span class="comment-post"><a href="https://webdesigner-go.com/skill/skills-webdesigner-must-have/#comment-1987">最初にチェック！Webデザイナーに転職する前に最低限持つべきスキル一覧</a></span>: “<span class="comment-excerpt">はじめまして。 2024年12月より3ヶ月、Webクリエイターの職業訓練校へ通…</span>” <span class="comment-date">2025.02.03 19:38</span></div></li><li class="recentcomments recent-comment"><div class="comment-wrap" style="padding-left:38px; min-height:34px;"><span class="comment-avatar"><img alt='' src='https://secure.gravatar.com/avatar/ceae25702700c5d88e032c0e80352ad4?s=30&d=mm&r=g' srcset='https://secure.gravatar.com/avatar/ceae25702700c5d88e032c0e80352ad4?s=60&d=mm&r=g 2x' class='avatar avatar-30 photo' height='30' width='30' decoding='async'/></span> <span class="comment-author-link">ねこポン</span> : <span class="comment-post"><a href="https://webdesigner-go.com/portfolio/idea/#comment-1986">ポートフォリオに掲載する作品のアイデアが浮かばない？アイデア出しの方法</a></span>: “<span class="comment-excerpt">山川さん、はじめまして。既存のサイトの画像や文章は著作権侵害になりうるの…</span>” <span class="comment-date">2025.01.23 19:29</span></div></li><li class="recentcomments recent-comment"><div class="comment-wrap" style="padding-left:38px; min-height:34px;"><span class="comment-avatar"><img alt='' src='https://secure.gravatar.com/avatar/1db347fbca54f630d655ca7a7e63e763?s=30&d=mm&r=g' srcset='https://secure.gravatar.com/avatar/1db347fbca54f630d655ca7a7e63e763?s=60&d=mm&r=g 2x' class='avatar avatar-30 photo' height='30' width='30' decoding='async'/></span> <span class="comment-author-link">山川琴巴</span> : <span class="comment-post"><a href="https://webdesigner-go.com/portfolio/idea/#comment-1985">ポートフォリオに掲載する作品のアイデアが浮かばない？アイデア出しの方法</a></span>: “<span class="comment-excerpt">架空のwebサイトを作る場合、既存のサイトの画像や文章は転載されているものを…</span>” <span class="comment-date">2025.01.20 12:35</span></div></li><li class="recentcomments recent-comment"><div class="comment-wrap" style="padding-left:38px; min-height:34px;"><span class="comment-avatar"><img alt='' src='https://secure.gravatar.com/avatar/348f7d234db4ca3d7b5da3a369e54f17?s=30&d=mm&r=g' srcset='https://secure.gravatar.com/avatar/348f7d234db4ca3d7b5da3a369e54f17?s=60&d=mm&r=g 2x' class='avatar avatar-30 photo' height='30' width='30' decoding='async'/></span> <span class="comment-author-link">SE</span> : <span class="comment-post"><a href="https://webdesigner-go.com/template/portfolio-basic-wordpress-usage/#comment-1984">ポートフォリオ用WordPressテーマ『PORTFOLIOベーシック』マニュアル</a></span>: “<span class="comment-excerpt">ねこポン様お世話になっております。早速返信くださりありがとうございます。…</span>” <span class="comment-date">2025.01.17 22:43</span></div></li><li class="recentcomments recent-comment"><div class="comment-wrap" style="padding-left:38px; min-height:34px;"><span class="comment-avatar"><img alt='' src='https://secure.gravatar.com/avatar/ceae25702700c5d88e032c0e80352ad4?s=30&d=mm&r=g' srcset='https://secure.gravatar.com/avatar/ceae25702700c5d88e032c0e80352ad4?s=60&d=mm&r=g 2x' class='avatar avatar-30 photo' height='30' width='30' decoding='async'/></span> <span class="comment-author-link">ねこポン</span> : <span class="comment-post"><a href="https://webdesigner-go.com/template/portfolio-basic-wordpress-usage/#comment-1983">ポートフォリオ用WordPressテーマ『PORTFOLIOベーシック』マニュアル</a></span>: “<span class="comment-excerpt">SE様変更できてよかったです！残念ながら縦横比を固定する機能はございませ…</span>” <span class="comment-date">2025.01.17 22:31</span></div></li></ul> </div> </div> </section> <section class="side-section"> <h2 class="side-section-heading__title"> オススメのサービス【PR】 </h2> <div class="side-section__body"> <div class="pr-list"> <div class="pr-list__item"> <a href="https://px.a8.net/svt/ejp?a8mat=2ZD4HL+4LIRFU+3NMW+609HT" rel="nofollow"> <img border="0" width="336" height="280" alt="プログラマカレッジ" src="https://www26.a8.net/svt/bgt?aid=180331257278&wid=012&eno=01&mid=s00000017060001009000&mc=1"></a> <img border="0" width="1" height="1" src="https://www11.a8.net/0.gif?a8mat=2ZD4HL+4LIRFU+3NMW+609HT" alt="imp"> </div> <div class="pr-list__item"> <a href="https://t.felmat.net/fmcl?ak=I36556.1.Y86287O.W78759Z" target="_blank" rel="nofollow noopener"><img src="https://t.felmat.net/fmimg/I36556.Y86287O.W78759Z" width="336" height="280" alt="無料PHPスクール" border="0" /></a> <span style="display: block; width:1px; height:16px;"></span> </div> <div class="pr-list__item"> <a href="//af.moshimo.com/af/c/click?a_id=4674361&p_id=3346&pc_id=7954&pl_id=47610" rel="nofollow" referrerpolicy="no-referrer-when-downgrade" attributionsrc><img src="//image.moshimo.com/af-img/2732/000000047610.png" width="336" height="280" style="border:none;"></a><img src="//i.moshimo.com/af/i/impression?a_id=4674361&p_id=3346&pc_id=7954&pl_id=47610" width="1" height="1" style="border:none;" loading="lazy"> </div> <div class="pr-list__item"> <a href="//af.moshimo.com/af/c/click?a_id=3635793&p_id=2322&pc_id=4990&pl_id=30707" rel="nofollow" referrerpolicy="no-referrer-when-downgrade"><img src="//image.moshimo.com/af-img/1797/000000030707.jpg" width="600" height="500" style="border:none;"></a><img src="//i.moshimo.com/af/i/impression?a_id=3635793&p_id=2322&pc_id=4990&pl_id=30707" width="1" height="1" style="border:none;"> </div> <div class="pr-list__item"> <a href="//af.moshimo.com/af/c/click?a_id=4144613&p_id=5265&pc_id=14295&pl_id=69084" rel="nofollow" referrerpolicy="no-referrer-when-downgrade"><img src="//image.moshimo.com/af-img/4137/000000069084.jpg" width="336" height="280" style="border:none;"></a><img src="//i.moshimo.com/af/i/impression?a_id=4144613&p_id=5265&pc_id=14295&pl_id=69084" width="1" height="1" style="border:none;"> </div> <div class="pr-list__item"> <a href="//af.moshimo.com/af/c/click?a_id=4021544&p_id=4855&pc_id=12919&pl_id=64425" rel="nofollow" referrerpolicy="no-referrer-when-downgrade"><img src="//image.moshimo.com/af-img/4137/000000064425.jpg" width="336" height="280" style="border:none;"></a><img src="//i.moshimo.com/af/i/impression?a_id=4021544&p_id=4855&pc_id=12919&pl_id=64425" width="1" height="1" style="border:none;"> </div> <div class="pr-list__item"> <a href="//af.moshimo.com/af/c/click?a_id=4146002&p_id=5314&pc_id=14492&pl_id=69632" rel="nofollow" referrerpolicy="no-referrer-when-downgrade"><img src="//image.moshimo.com/af-img/4976/000000069632.jpg" width="300" height="250" style="border:none;"></a><img src="//i.moshimo.com/af/i/impression?a_id=4146002&p_id=5314&pc_id=14492&pl_id=69632" width="1" height="1" style="border:none;"> </div> <div class="pr-list__item"> <a href="//af.moshimo.com/af/c/click?a_id=3418278&p_id=4247&pc_id=10819&pl_id=58380" rel="nofollow" referrerpolicy="no-referrer-when-downgrade"><img src="//image.moshimo.com/af-img/3802/000000058380.png" width="300" height="250" style="border:none;"></a><img src="//i.moshimo.com/af/i/impression?a_id=3418278&p_id=4247&pc_id=10819&pl_id=58380" width="1" height="1" style="border:none;"> </div> <div class="pr-list__item"> <a href="https://px.a8.net/svt/ejp?a8mat=35S9AC+1PBWKQ+3UNE+TSYJL" rel="nofollow"> <img border="0" width="300" height="250" alt="ジョブトレIT・Web" src="https://www26.a8.net/svt/bgt?aid=191115012103&wid=012&eno=01&mid=s00000017969005006000&mc=1"></a> <img border="0" width="1" height="1" src="https://www18.a8.net/0.gif?a8mat=35S9AC+1PBWKQ+3UNE+TSYJL" alt="imp"> </div> <div class="pr-list__item"> <a href="//af.moshimo.com/af/c/click?a_id=2353224&p_id=2793&pc_id=6354&pl_id=51173" rel="nofollow" referrerpolicy="no-referrer-when-downgrade"><img src="//image.moshimo.com/af-img/0323/000000051173.jpg" width="300" height="250" style="border:none;"></a><img src="//i.moshimo.com/af/i/impression?a_id=2353224&p_id=2793&pc_id=6354&pl_id=51173" width="1" height="1" style="border:none;"> </div> <div class="pr-list__item"> <a href="//af.moshimo.com/af/c/click?a_id=2234686&p_id=2888&pc_id=6626&pl_id=37402" rel="nofollow" referrerpolicy="no-referrer-when-downgrade"><img src="//image.moshimo.com/af-img/2245/000000037402.jpg" width="336" height="280" style="border:none;"></a><img src="//i.moshimo.com/af/i/impression?a_id=2234686&p_id=2888&pc_id=6626&pl_id=37402" width="1" height="1" style="border:none;"> </div> <div class="pr-list__item"> <a href="//af.moshimo.com/af/c/click?a_id=3635790&p_id=3639&pc_id=8851&pl_id=67869" rel="nofollow" referrerpolicy="no-referrer-when-downgrade"><img src="//image.moshimo.com/af-img/3095/000000067869.jpg" width="300" height="299" style="border:none;"></a><img src="//i.moshimo.com/af/i/impression?a_id=3635790&p_id=3639&pc_id=8851&pl_id=67869" width="1" height="1" style="border:none;"> </div> <div class="pr-list__item"> <a href="//af.moshimo.com/af/c/click?a_id=2742091&p_id=3554&pc_id=8575&pl_id=51504" rel="nofollow" referrerpolicy="no-referrer-when-downgrade"><img src="//image.moshimo.com/af-img/2965/000000051504.png" width="540" height="540" style="border:none;"></a><img src="//i.moshimo.com/af/i/impression?a_id=2742091&p_id=3554&pc_id=8575&pl_id=51504" width="1" height="1" style="border:none;"> </div> <div class="pr-list__item"> <a href="/job/3day-agent/" onclick="ga('send', 'event', 'link','click', 'AD_3day-agent')"><img width="300" height="250" src="https://webdesigner-go.com/wp-content/themes/webdesigner/img/bnr_3days-agents.webp" alt="フリーランスエージェントランキング"></a> <span style="display: block; width:1px; height:16px;"></span> </div> <div class="bnrSide"> <a href="https://necopo.com/" onclick="ga('send', 'event', 'link','click', 'AD_necopo')"><img width="300" height="300" src="https://webdesigner-go.com/wp-content/themes/webdesigner/img/bnr_necopo.webp" alt="月額費用不要！自分で更新ができる！ホームページ制作。新宿区高田馬場のフリーランスWebデザイナーねこポッポ"></a> </div> <div class="bnrSide"> <a href="https://offshore.jvb-corp.com/" onclick="ga('send', 'event', 'link','click', 'AD_jvb')"><img width="300" height="300" src="https://webdesigner-go.com/wp-content/themes/webdesigner/img/bnr_jvb.webp" alt="ベトナムオフショア開発のJVB"></a> </div> </div> </div> </section> <section class="side-section"> <h2 class="side-section-heading__title"> マンガ『Webデザインの現場』 </h2> <div class="side-section__body"> <p class="img-wrapper"><a href="/design/senpai/"><img src="https://webdesigner-go.com/wp-content/themes/webdesigner/img/webdesign-comic.webp" width="" height="" alt="Webデザイナーのマンガ"></a></p> </div> </section> </aside> </div> </div> </div> </div> </main> <footer class="footer"> <div class="container"> <div class="footer-2col"> <nav class="footer-nav"> <ul class="footer-nav__list"> <li class="footer-nav__item"> <a class="footer-nav__link" href="https://webdesigner-go.com/">ホーム</a> </li> <li class="footer-nav__item"> <a href="/about/" class="footer-nav__link">Webデザイナーとは</a> </li> <li class="footer-nav__item"> <a href="/skill/" class="footer-nav__link">必要なスキル</a> </li> <li class="footer-nav__item"> <a href="/study/" class="footer-nav__link">勉強方法</a> </li> <li class="footer-nav__item"> <a href="/job/" class="footer-nav__link">転職テクニック</a> </li> <li class="footer-nav__item"> <a href="/portfolio/" class="footer-nav__link">ポートフォリオ制作講座</a> </li> <li class="footer-nav__item"> <a href="/workstation/" class="footer-nav__link">快適な制作環境</a> </li> <li class="footer-nav__item"> <a href="/proskill/" class="footer-nav__link">プロのノウハウ</a> </li> <li class="footer-nav__item"> <a href="/rule/" class="footer-nav__link">ルールや心得</a> </li> <li class="footer-nav__item"> <a href="/agent/" class="footer-nav__link">転職エージェント体験談</a> </li> <li class="footer-nav__item"> <a href="/template/" class="footer-nav__link">テンプレート</a> </li> </ul> </nav> <div class="footer-pr"> <a href="https://note.com/necopon/n/n56cb79db5094" target="_blank" rel="noopener"> <img class="footer-pr__img" src="https://webdesigner-go.com/wp-content/themes/webdesigner/img/bnr_portfolio-checklist-top.webp" alt="ポートフォリオチェックリスト" width="" height=""> </a> </div> </div> <div class="footer-contact"> <a class="footer-contact__link" href="/contact/">お問い合わせ</a> </div> <div class="footer__logo"> <a href="https://webdesigner-go.com/"><img src="https://webdesigner-go.com/wp-content/themes/webdesigner/img/logo_white.webp" width="" alt="未経験からWebデザイナーへ！"></a> </div> <p class="footer__copyright">©ねこポッポ株式会社</p> </div> </footer> <div class="scroll-top"> <img class="scroll-top__icon" src="https://webdesigner-go.com/wp-content/themes/webdesigner/img/icon_arrow-up.svg" alt="上への矢印"></div> <script> var pochippSaleData = { amazon:{"start":"","end":"","text":""}, rakuten:{"start":"","end":"","text":""}, yahoo:{"start":"","end":"","text":""}, mercari:{"start":"","end":"","text":""}, }; </script> <script> jQuery(function($){ }); </script> <div id="fb-root"></div> <script type="text/javascript" src="https://webdesigner-go.com/wp-includes/js/dist/hooks.min.js?ver=4d63a3d491d11ffd8ac6" id="wp-hooks-js"></script> <script type="text/javascript" src="https://webdesigner-go.com/wp-includes/js/dist/i18n.min.js?ver=5e580eb46a90c2b997e6" id="wp-i18n-js"></script> <script type="text/javascript" id="wp-i18n-js-after"> /* <![CDATA[ */ wp.i18n.setLocaleData( { 'text direction\u0004ltr': [ 'ltr' ] } ); /* ]]> */ </script> <script type="text/javascript" src="https://webdesigner-go.com/wp-content/plugins/contact-form-7/includes/swv/js/index.js?ver=6.0.4" id="swv-js"></script> <script type="text/javascript" id="contact-form-7-js-translations"> /* <![CDATA[ */ ( function( domain, translations ) { var localeData = translations.locale_data[ domain ] || translations.locale_data.messages; localeData[""].domain = domain; wp.i18n.setLocaleData( localeData, domain ); } )( "contact-form-7", {"translation-revision-date":"2025-02-18 07:36:32+0000","generator":"GlotPress\/4.0.1","domain":"messages","locale_data":{"messages":{"":{"domain":"messages","plural-forms":"nplurals=1; plural=0;","lang":"ja_JP"},"This contact form is placed in the wrong place.":["\u3053\u306e\u30b3\u30f3\u30bf\u30af\u30c8\u30d5\u30a9\u30fc\u30e0\u306f\u9593\u9055\u3063\u305f\u4f4d\u7f6e\u306b\u7f6e\u304b\u308c\u3066\u3044\u307e\u3059\u3002"],"Error:":["\u30a8\u30e9\u30fc:"]}},"comment":{"reference":"includes\/js\/index.js"}} ); /* ]]> */ </script> <script type="text/javascript" id="contact-form-7-js-before"> /* <![CDATA[ */ var wpcf7 = { "api": { "root": "https:\/\/webdesigner-go.com\/wp-json\/", "namespace": "contact-form-7\/v1" } }; /* ]]> */ </script> <script type="text/javascript" src="https://webdesigner-go.com/wp-content/plugins/contact-form-7/includes/js/index.js?ver=6.0.4" id="contact-form-7-js"></script> <script type="text/javascript" src="https://webdesigner-go.com/wp-includes/js/jquery/jquery.form.min.js?ver=4.3.0" id="jquery-form-js"></script> <script type="text/javascript" id="stripe-handler-ng-js-extra"> /* <![CDATA[ */ var wpASPNG = {"iframeUrl":"https:\/\/webdesigner-go.com\/asp-payment-box\/","ppSlug":"asp-payment-box","prefetch":"0","ckey":"dbe7fd402cb1ba2369a44f240d367905","aspDevMode":"1"}; /* ]]> */ </script> <script type="text/javascript" src="https://webdesigner-go.com/wp-content/plugins/stripe-payments/public/assets/js/stripe-handler-ng.js?ver=2.0.90" id="stripe-handler-ng-js"></script> <script type="text/javascript" id="toc-front-js-extra"> /* <![CDATA[ */ var tocplus = {"smooth_scroll":"1","visibility_show":"show","visibility_hide":"hide","width":"Auto"}; /* ]]> */ </script> <script type="text/javascript" src="https://webdesigner-go.com/wp-content/plugins/table-of-contents-plus/front.min.js?ver=2411.1" id="toc-front-js"></script> <script type="text/javascript" src="https://webdesigner-go.com/wp-content/themes/webdesigner/js/script.js?ver=1710678903" id="script-js"></script> <script type="text/javascript" src="https://webdesigner-go.com/wp-content/plugins/highlighting-code-block/assets/js/prism.js?ver=2.0.1" id="hcb-prism-js"></script> <script type="text/javascript" src="https://webdesigner-go.com/wp-includes/js/clipboard.min.js?ver=2.0.11" id="clipboard-js"></script> <script type="text/javascript" id="hcb-script-js-extra"> /* <![CDATA[ */ var hcbVars = {"showCopyBtn":"1","copyBtnLabel":"\u30b3\u30fc\u30c9\u3092\u30af\u30ea\u30c3\u30d7\u30dc\u30fc\u30c9\u306b\u30b3\u30d4\u30fc\u3059\u308b"}; /* ]]> */ </script> <script type="text/javascript" src="https://webdesigner-go.com/wp-content/plugins/highlighting-code-block/build/js/hcb_script.js?ver=2.0.1" id="hcb-script-js"></script> <script type="text/javascript" src="//aml.valuecommerce.com/vcdal.js?ver=1.16.0" id="pochipp-vcdal-js"></script> </div> </body> </html>

CINXE.COM

未経験からWebデザイナーへ！【2025年版】