Webの最新トピックを配信中!

Webデザイナーに必要なパソコンの性能


せっかくパソコンを買ったのに性能が低くてPhotoshop動かない…、そんなことがないようにWebデザインに必要なパソコンの性能を把握しておきましょう。

Web制作では、PhotoshopやIllustratorを使うため、ある程度の性能が求められます。これらのソフトがサクサク動くパソコンにしましょう。大丈夫です!意外に安上がりです。

Webデザインに必要なパソコンのスペック

CPU : インテル Core i5以上
メモリ : 16GB
ハードディスク : 500GB以上
OS : Windows10 or Mac最新
モニター : 20インチ以上、フルHD(1920×1080)
グラフィックカード:無くても良し

CPU

インテルのCPUは、主にi7・i5・i3というラインナップがあります。i7が一番性能が良いですが、i5で十分にOKです。WebデザインではCPUを過度に使う作業は少ないため、むしろ消費量の大きいメモリの方にこだわってください。

僕の個人のPCはi7です。会社のPCはi3でしたw

メモリ

これが一番重要です。必ず16GB以上にしてください。ちょっと軽く写真の補正をする程度なら、8GBでOKです。しかし、PhotoshopとIllustratorで重めのファイルを開いて作業しながら、さらにDreamweaverで同時にコーディングもして、Slackでクライアントとチャットしながら、原稿ファイルであるExcelも見つつ、PCのブラウザを複数開いてサイトの表示の検証をしていたら、もうまったく8GBでは足りませんw

通常、パソコンショップで販売されているPCは8GBが多いです。そのパソコンを買って、結局「パソコン重い!」となって、8GBのメモリをさらに買い足して16GBにすることは周りで頻繁に起きています。メモリの拡張はそれほど難しくないですが、どうせ後から拡張するなら、最初から16GBにしておくことをおすすめします。僕のPCも当然16GBです。

32GBはさすがに必要ありません。ただもし、動画編集もガッツリこなしたい人がいれば、32GBも要検討です。

ハードディスク

少なくとも500GBは必要です。PhotoshopやIllustratorのファイルサイズは、ものによってはかなり大きくなります。

最近は、高速な起動を実現するSSDというメモリタイプのハードディスクがありますが、高価なため、容量が少なめの256GBを選択することがあるかもしれません。その場合は、1TB以上の外付けのハードディスクを追加しましょう。6000~7000円と意外に安価です。

OS

こちらは特に迷わず、Windowsなら10かMacなら最新のものでOKです。WindowsかMacのどちらを選ぶかについては、こちらの記事でまとめました。
WebデザイナーはMacかWindowsのどちらを選ぶべきか?

Windowsは10以上でないと、AdobeXDというUI/UXデザインツールが使えません。最近、AdobeXDは現場でもワイヤーフレームを書くために、よく用いられるようになりました。中には慣れているからWindows7を使いたいという方もいるかもしれませんが、プロのWebデザイナーを目指す場合は、Windows10にしましょう。

モニター

モニターは、デスクトップの場合は、20インチ以上は欲しいところです。解像度は1920×1080のフルHDにしましょう。画面が小さくて表示範囲が狭いと、Photoshopでサイトのデザインがかなりしづらいためです。

Web制作の現場や、個人のフリーランスの場合でも、上のようにディスプレイを2つ横に並べて、画面を2つ使って作業することが多いです。これをデュアルディスプレイといいます。片方にPhotoshopのデザインを表示し、もう片方にエディタを出してコーディングすると作業が快適です。

モニターは安いものだと10000円から手に入りますが、メインで使うモニターは、少し質の高いものにしましょう。デザインには、色が正確で、目が疲れづらいモニターが必須です。

僕も使ってる『EIZO FlexScan』シリーズはWebデザイナーに人気です。一度、某メーカーの15000円くらいのモニターをAmazonで買ったのですが、色の表示が妙に白っぽくてすぐに返品しました。それからEIZOのこれを使っていますが、色の表示がすごく精確で落ち着いていて、長時間作業でも目が疲れづらく大のお気に入りです。23.8インチで39,000円くらいです。

ノートパソコンもHDMIで、外部のモニターに繋げられます。僕はそのパターンで、EIZOのモニターをメインモニターとし、ノートPC(MacBookPro)の画面をサブモニターとして使っています。
ノートPCのモニターの大きさは、外部モニターに繋いで作業をするなら13〜14インチでも良いです。でも、ノートPC単体で作業をするなら13〜14インチでは画面が小さくデザイン作業がしづらい(僕の感覚ですが)ので、15〜16インチのノートPCも検討しましょう。

 

ここで示した数値以上のパソコンであれば、あまり性能については過敏になる必要はありません。自分の好みの機種を選べばOKです。
僕が求職者支援訓練に通っていた頃に使っていたPCは、6万円のThinkpad E430という激安ノートパソコンでしたが、サクサク作業できていました。グラフィックカードなんて入っていませんでした。それは16GBのメモリによるものが大きいと思います。

コラム①:正社員のWebデザイナーを強くオススメする理由

このサイトでは、
本当にWebデザインのスキルを磨きたいなら、未経験の方はまずはWeb制作会社に正社員で入社すること
を強くオススメしています。

Webの最先端に触れられるWeb制作会社に入社し、スキルをガッツリ高めてほしいです。そして、社内では、やはり派遣でもなく、アルバイトでもなく、長く在籍する可能性のある正社員にこそ成長できるお仕事を振ってくれるのです。派遣やアルバイトは、リンク張り替えやテキスト修正など成長しづらい作業をやらされがちです……。

未経験OKで正社員のWebデザイナー・フロントエンドエンジニア案件を多く保有しているのが、IT系に強いワークポートです。Webに強いエージェントは他にもあるし、僕もいくつも登録していますが、ワークポートほど大量に求人案件を紹介してくれるエージェントを他に知りません笑。 なぜワークポートは未経験者に大量の求人を紹介できるのか?その評判の秘密に迫る! ↑ワークポートさんに会ってきました!ねほりはほりと質問をぶつけています。ぜひ読んでみてください。

転職エージェントは複数登録しますが、ワークポートはそのうちのメインエージェントして必ず登録しましょう。

『ワークポート』公式サイトへ
コラム②:Webデザイナーを強くオススメする理由

あなたはたぶんエンジニアにはなれません。
だからこそ、このサイトでは、Webデザイナーになることを強くオススメしています。

でも、もし、エンジニアになれれば、月収100万円以上も可能です。実際に僕の友人も軽く年収1000万円は超えています。

ほとんどの人がエンジニアにはなれないので、30〜40万円以上はする高額なプログラミングの学校に行くのはお金をドブに捨てる可能性があります。
どうしてもエンジニアになりたい方は、無料でプログラミングを学べるProEnginner開講の学校『プログラマカレッジ』に行きましょう。プログラマカレッジは、学校&就職支援の一体型サービスです。ここは本当にありがたい存在です。ソーシャルゲーム大手企業で有給インターンまで可能です。
無料のプログラミング学校はもう一つ、『GEEK JOB』があります。就職率97.8%と驚異的な数字を出しています!よりエンジニア色の強いカリキュラムを受けたい場合はこちらを受講します。
2校ともオススメです。無料見学をしてみて自分に合いそうな雰囲気の学校を選びましょう。
この2つの学校のどちらかに通って、自分にエンジニアとしての素質があるのかチェックしてください。もし、あなたに才能があったら、最高にラッキーな人生です。20代のみ対象です。もし20代ならこのチャンスをぜひつかんでください。

30歳以上の方は、『テックキャンプ エンジニア転職』 がオススメです。転職できなければ授業料全額返金してくれます。教室は9時〜22時まで開放し、教室あるいはオンラインでマンツーマンで無制限に質問ができます!超集中なら10週間、ゆったりなら6ヶ月と期間も生活に合わせて選べます。スクールは無数にありますが、有料系ではここが一番爆速に成長できそうです。
参考記事 : なぜ「エンジニア」ではなく「Webデザイナー」をすすめるのか

無料のプログラミング学校『プログラマカレッジ』の詳細を読む 『テックキャンプ エンジニア転職』の詳細を読む

“Webデザイナーに必要なパソコンの性能” への29件のフィードバック

  1. みな より:

    全くの初心者で、中古のパソコンから購入し、学ぼうと思っています。
    パソコンのスペックは把握しましたが、
    私が買おうとしているのは、メモリなどの条件は満たされているのですが、Microsoft officeではなく、LibreOfficeが入っています。問題ありませんでしょうか?

    • ねこポン より:

      みなさん、はじめまして。

      Webデザインの学習においては、Office自体が必要ありません。

      個人でクライアントを相手にして仕事をする場合は、パワーポイントやエクセルで資料を共有されることがあるため、Officeが必要になるケースはあります。

      ちなみに僕はMacですがOfficeは持っていません。エクセルであればGoogleのスプレッドシートにアップロードすることで見れて編集もできるからです。

      LibreOfficeについてはよく知りません。
      いずれにしろ、Webデザインの勉強で使うだけのPCなら通常はOfficeは必要ありません。

  2. みな より:

    返信ありがとうございます。
    ちなみにドットインストールの手順で、
    HTML/CSSの学習環境を整えようWindows編を進めているのですが、#4の所でRicty Diminishedの導入をしても全角空白の欄が反映されてないのですが、どうすればいいか教えて頂けますか?

  3. あみ より:

    コメント失礼します。
    WEBデザイナーの勉強を始めようとしております。
    所持のPCは

    MacBook Pro
    13-inch, Mid 2012
    ソフトウェア OS X 10.9.5(13F1911)

    です。
    Photoshopをインストールする際に、
    「Photoshop をインストールするには、システムをアップデートする必要があります。」
    と出てきてしまいました。

    私のPCでは対応していないということでしょうか。
    ご回答よろしくお願いいたします。

    • ねこポン より:

      あみさん、はじめまして。
      おそらくMacOSのアップデートが必要かと思われます。

      AdobeのPhotoshopのMacOSの対応状況はこちらです。
      https://helpx.adobe.com/jp/photoshop/kb/3245.html
      見た限り、最新のPhotoshopCCの場合は、Mac OS X 10.11(El Capitan)以上であれば問題なく動くようです。

      現在の最新のMacOSはCatalinaです。
      https://www.apple.com/jp/macos/how-to-upgrade/
      こちらの要件を見るとOS X 10.9以降でMacBook Pro(Mid 2012以降)であればアップグレードできると記載があります。なので、あみさんのPCも最新のCatalinaにアップグレードできるはずです。

      MacOSをアップデートしてから、Photoshopのインストールを試してみてください。

      Webデザインの勉強がんばってください!

  4. びび より:

    初めまして、コメント失礼致します。

    転職したいと思いここ数年悩んでいたのですが、
    何か生み出す仕事や手に職をつけられるような仕事をしたいなと思うようになり、そんな中、
    webデザイナーってどうなのだろうと検索したところこちらに辿りつきました!
    未経験からの不安や知りたいことが分かりやすく解説されていてwebデザイナーやってみたいかも…!と前向きになれました!
    そこで、今後の計画として現職を退職して雇用保険を貰いながら訓練校に通いたいと考えています。
    その前に独学でも勉強したいので
    PCを新調したいのですが(今持っているのは4GBの9年前のモデルなので…泣)
    HP ENVY x360 15-dr1000 はwebデザインを勉強する上ではどうでしょうか…?

    PCは音楽や動画などでしか
    使って来なかったためあまり詳しく無いので
    買う前にご相談させてください。
    よろしくお願い致します。

    • ねこポン より:

      びびさん、はじめまして!

      前向きになっていただけて嬉しいです。手に職をつけて楽しく仕事をしたいですよね。雇用保険がもらえて職業訓練が受けれるのは良かったです。がんばっていきましょう!

      PCについては、この記事で書いたスペックを満たしていれば正直言って何でもいいですよ。僕は責任取れません笑。でも、そのHPのPCを公式サイトで見ましたが、すごくかっこいいですね!15インチで画面もそこそこ大きくて作業しやすそうですし。メモリが16GBのパフォーマンスプラスモデルがいいですね。一度、店頭でタイピングしたり画面の見やすさを確認した方がいいです。結局は「自分が使いやすいかどうか」です。使いやすければスペックさえ満たしていれば、基本的にはどんなPCでもOKです。

      独学したり職業訓練に通い始めて、またご質問があればいつでもコメントをください。Webデザイン、楽しんで勉強していきましょ〜^^

      • びび より:

        ねこポンさんお返事ありがとうございます!

        実はわたしもこのPCのデザイン、
        気に入ってます笑
        (シルバーで統一感あってシンプルでかっこいい…!)
        アドバイスありがとうございました、
        早速試しに行ってきます!

        職業訓練は都内に上京して受けたいと考えてるいるので、何かと苦労と不安はありますが
        この先楽しく働く為にも頑張りたいです。

        ねこポンさんに相談できるのはとても励みになるのでまたぜひよろしくお願いします!

  5. こむぎこ より:

    ねこぽんさま
    はじめまして。突然のコメント失礼いたします。
    未経験ですがWEBデザイナーという職に興味を持っており、WEB制作会社への転職を目標に今後スクールに通う予定です。
    ねこぽんさんの本サイトとTwitterを拝見していつもモチベーションを上げております。ありがとうございます!
    早速ですが、勉強するにあたりパソコンの新調を考えているのですが、下記2商品で悩んでおりなかなか購入に踏み切れずにおります。

    ・mouse DAIV 4N
    ・DELL Inspiron 14 7000

    どちらも本記事にてご説明いただいているスペックはクリアしておりますので、好みの方!というのがご回答かと存じますが、ねこぽんさん的にどちらの方がおすすめ等ございましたら、なにかアドバイスを頂けますと幸いです。 (DAIVの方は近くの家電量販店になく実際に触れられないのも悩む一因となっております…。)

    突然のご相談で大変恐縮ですが、どうぞよろしくお願いいたします。

    • ねこポン より:

      こむぎこさん、はじめまして!
      ツイッターも見てくださってるんですね。ありがとうございます!

      PCの比較ですが、「こちらのPCがオススメ!」と断定はできません(;^_^。 人によって好みもありますし、スペックだけではわからない様々な使用感もあると思うからです。

      なので、「僕ならどちらを選ぶか?」しか言えませんが、僕はかなり迷って結局DAIV
      を選ぶと思います。DAIVってけっこう昔からありますよね。たしか数年前は重量があって選択肢には入りませんでしたが、今は軽くなって見た目もスタイリッシュになってかっこいいですね!しかも周りで持っている人をあまり見かけないのも唯一無二感があって好きです(中二病)。あとは何やら画面も綺麗なようですし。
      ただ店頭で触れないのはちょっと不安ですね〜。YouTubeにも全然レビューが上がってないですね。。でも価格コムのレビューでは評判はおおむね良さそうです。

      一方、DellのInspironは、ベタですよね。良く言えば「オーソドックスではずれがない」、悪く言えば「平凡」です。あくまで僕にとってですが…。信頼と実績があるので、これを買っておけば間違いはないと思いますが、冒険心は満たさないですよね。しかも、あとになって「あー、DAIVってどんな感じだったのかなぁ…」と後悔しそうです。どうせなら、持っていてワクワクするPCがいいですよね。
      ただ、この機種はLTEモデルがあるので、SIMカード契約して装着すればネットができちゃいますよね。前にLTEに対応したThinkPadのx1Cardbonを少しだけ使っていた時にSIMを指して使ってましたが、これはなかなか便利でした。WiFiが無くてしかもテザリングがしづらい状況だと、パッと一瞬でつながるLTEは重宝しました。ただ今はずっと自宅にいてあまりPCを外に持ち出さないのでその必要性は感じていませんが。もし頻繁に外に持ち出す予定なら、LTEに対応した機種がいいですね。

      ちなみにWebデザインの勉強をする時は、このノートPCを外部ディスプレイにつなげて作業するイメージでいいですよね?もしノートPC単体で作業をする場合は、(これ以上迷わせたとしたら申し訳ないですが、、、)僕は14インチは選びません。画面が小さすぎるからです。MacBookProも15インチから最新機種では16インチになりました。それはすごく納得で15インチですら僕にとっては画面が小さく感じるからです。僕のMacBookProは15インチですが、これ単体でデザインの作業をすることは画面が小さすぎてほぼありません。
      「普段は外部ディスプレイにつなげて作業する、たまにカフェとか外に持ち出して作業する」なら14インチのこの2つの機種での検討で大丈夫です。でももしノートPC単体で作業する予定なら、15〜16インチのノートPCも見てみた方がいいです。もちろん、14インチが作業しづらいというのは僕の感覚なので、14インチでも全然OKなら問題ないです。

      すみません、あまり参考にならないですよね。。僕は好奇心にまかせてDAIVを選ぶような気はします。どっちも良い機種だと思います。結局は、こむぎこさんの好みの方!ですね笑

      Webデザインの勉強、楽しんでがんばっていきましょ〜^^

      • こむぎこ より:

        ねこポンさま
        かなり個人的な質問に色々調べてご回答いただきありがとうございます!
        かなり安く古いものですが、モニターは所持しておりますので、外出等の持ち運びも考慮して現在14、大きくても15インチに絞って探しているところです。

        LTEのことを考えもいなかったので大変勉強になりました!ちょっとその部分も併せて考えたいと思います。

        個人的にはDAIVが気になりつつもYouTubeレビュー少ないし実機に触れられないし…でなにか背中押してもらい部分があったのかもしれないな…とねこポン様から頂いたお返事を見て感じました!笑

        さいどLTEが必要かどうかも考えながら購入パソコンを決めたいと思います。

        本当にありがとうございました!

        • ねこポン より:

          外部モニターがあるならよかったです!

          マウスはアフィリエイトプログラムをやっていて、製品の貸し出しをやってますね。もしブログなどお持ちでしたら、レビュー用にDAIVをレンタルできるかもです。参考までに!
          https://www.mouse-jp.co.jp/affiliate/
          アフィリエイトプログラムのご案内
          「製品のお貸出し等のサポートあり」

          • こむぎこ より:

            ねこポン様
            諸々ご丁寧にありがとうございます。先日遂にDAIV 4Nをポチりまして、手元に届きました!
            これから勉強頑張りたいと思います!
            パソコンを購入するという初期の初期で躓いていたので、背中を押していただき本当に助かりました。ありがとうございました!

            • ねこポン より:

              こむぎこさん、こんにちは!
              おぉ〜DAIV届きましたか!フルに使い倒していきたいですね。
              Webデザインの勉強、楽しくがんばっていきましょう。
              また何かあればいつでもコメントをください^^

  6. こっしー より:

    初めましてねこポンさん。
    「Webデザイナーに必要なパソコンの性能」の」記事を読ませて頂き、具体的でとても参考になりました。
    質問させて下さい。
    パソコンではなくiPadでの業務は可能ですか?
    推奨されているモニターの大きさに満たないのは承知です。
    PhotoshopやIllustrator、コーディング等ができるのか知りたいです。
    ipadでプログラミングをするためのテキストエディタアプリはあるようです。
    エンジニア程の開発は目指していません。
    よろしくお願いします。

    • ねこポン より:

      こっしーさん、はじめまして。

      記事を読んでいただきありがとうございます!

      iPadでのWebデザインの業務は基本的には不可能だと思ったほうがいいです。

      iPadにもPhotoshopアプリなどは存在しますが、あくまで写真を加工するためのアプリなので、サイトやバナーのデザインをするほどの機能は持っていないはずです。もちろんかなり頑張れば不可能ではないかもしれませんが、iPadでWebデザインの業務をこなしている方は見かけたことがありません。

      コーディングについては、iPad対応のエディタアプリはあるのでコーディングはできなくはないし、一応FTP機能搭載のエディタもあるのでサーバーへのファイルのアップロードも可能で、なんとかコーディングはできます。ただ僕の周りにiPadでコーディングしている方はいないですね。。やはり、やりづらいんだと思います。

      参考:iPadでHPを更新する方法 コーディング&FTPアプリ
      https://itxdancer.com/tech/ipad-website-coding/

      • こっしー より:

        ご返信ありがとうございます。参考HPまで!!

        デザイン業務でパソコンと同等のことをするのは、まだ難しいのですね。
        ipadでプログラミングをするといった記事を調べてチラホラ見つけましたが、実際は行える程度といった感じなのですね。
        iPadで業務を行っている人もそこそこいるものだと思ってました。
        参考サイト拝見しました。
        Wordpressもできるのですね、コーディングが可能ならばJQueryといったものも可能なのですか?

        • ねこポン より:

          >コーディングが可能ならばJQueryといったものも可能なのですか?
          はい、FTP機能がありファイルのアップロード/ダウンロードができるのなら、jQueryのライブラリも読み込めるはずです。

          でもやはりPCが無いと、基本的にはWebデザインの作業はほぼできないと思ったほうが良さそうです。

  7. 詩乃 より:

    ねこポンさんへ。いつもこちらのサイトを見ながら、お世話になっています(>人<;)未経験で転職を目指している者です。現在ねこポンさんのサイトを毎日見ながら、PhotoshopとIllustratorを使って、昨日、架空FVが7個程完成したところです!(WORKSの部分が出来ました)(本当は見せたい)

    そこで質問なのですが、

    ●ポートフォリオのfuture部分は、ポートフォリオサイトではなく、もう一つホームページを無理やりにでもやはり何か決めて作るべきでしょうか?それともポートフォリオ自体のサイトを凝り、そのポートフォリオサイトの、説明でも良いのでしょうか?

    ●独自ドメインはやはり名前.comが相手方に解り易いでしょうか?

    ●ねこポンさんのように、ポートフォリオTOPに顔を前面に出した方がやはり好印象ですか?それともaboutのみに、小さく載せても良いのでしょうか?

    ●スキルレベルはどの程度ソフトを扱えたら、星をつけていいのでしょうか?

    お忙しい中、3つも質問をしてしまい、失礼がありましたら、すみません。良かったら教えてください(><)

    • ねこポン より:

      詩乃さん、はじめまして!
      サイトを参考にしてくださってありがとうございます。

      ・ポートフォリオのfeature部分について
      featureに掲載する作品はポートフォリオサイトとは別なものの方が良いです。よほどポートフォリオサイト自体に自信がありアピールしたければfeatureに掲載して解説してもいいですが、ポートフォリオを作品としてあえて載せなくていいと思います。デザイン&コーディングした別のサイトを掲載しましょう。
      もし、どうしてもfeature用に他の作品を作る余裕が無ければ、featureの枠自体を無くしちゃってもいいです。もちろんWorksの方に3〜6作品は掲載している前提です。

      ・独自ドメインについて
      ドットコムが無難ですね。あえてそこで変わったドメインにするよりは普通に●●●.comで良いと思います。

      ・ポートフォリオに顔を出すか?
      僕のポートフォリオサイトは顔を出しすぎです笑。あそこまでしなくていいです。
      お客さんの立場に立てば、顔が合ったほうが「あ、こういう方がサイトを作ってくれるんだ」とわかって安心感はあるかもなので、おっしゃるとおりaboutに小さく載せる程度で良いです。顔を出すことに不安があるようでしたら、顔のイラストなどでもかまいません。

      ・スキルレベルの星について
      これは特に決まりはありません笑。人それぞれのさじかげんです。でもだいたいPhotoshopの基礎的なことができるようなら、Photoshopの星は3か4くらいで良いんじゃないでしょうか。

      Webデザインの勉強、楽しみながらがんばってください^^

      • 詩乃 より:

        分かりやすく丁寧にご返信頂き、ありがとうございます😭助かりました!

        良かったら、もういくつかだけお尋ねしたいことがあるのですが…!

        ●futureに載せるために作るホームページが全く浮かんでこないのですが…どんな嗜好のものがポイント高いとかはあるでしょうか?m(_ _)mねこポンさんみたいな、皆の為になるお勉強サイトを作れるほどの知識も、まだないし…何を作ればいいのか悩んでいます。

        ●wordpressでホームページを制作するのがこれから初めてなのですが、有料テーマデザインの購入はした方がいいですか?それとも、全て無料のテーマデザインから自分でカスタマイズした方がWebデザイナーとして常識であるなどの、規律はあるのでしょうか。

        ●windowsのPCしかないのですが、ヒイラギフォントがないと、(在宅ワークの場合)やはり致命的なのですか?

        何度もすみませんm(_ _)m
        お時間許す時に、良ければお力を頂ければ幸いです(><。)

        いつもありがとうございます。

        • ねこポン より:

          詩乃さん、こんにちは。気になることはどんどん質問してくださって大丈夫です^^

          1.featureに載せる作品はどのようなものがいいか?
          基本的にはシンプルなコーポレートサイト(企業サイト)で良いと思いますよ。あまり自分の個性を強く出しすぎると「この人は自分の作りたいものだけを作ってるんだな」と採用側に思われてしまうので、コーポレートサイトや、あとは実際に現場で作ることは少ないですが、自分の好みに合わせてECサイト(ファッションのネットショップ等)、レストランサイト、カフェサイトや美容院サイトでもOKです。自分の知識がまったくない業態のサイトは作りづらいと思うので、少しは知っていたり好きだったりする領域のサイトがいいかもしれません。

          あとはもし可能だったらの話ですが、知り合いや友達のお店のサイトを作ってあげて、それを掲載するということもよくやります。

          「自分でサイトのテーマを決めて、構成とコンテンツを考えること」もWebデザイナーの仕事の醍醐味だし重要なスキルと言えると思っています。最初のうちはなかなか大変かもしれませんが、楽しみながらサイトの案を練ってみてください。

          featureにはがっつりデザインとコーディングをした自信作を掲載しましょう。

          2. WordPressのテーマはどのように作るか?
          テーマはすべて自分でゼロから作ります。Webデザイナーとしてアピールする場合は既存の有料や無料のテーマは使いません。「オリジナルのテーマを自分でゼロから作れる」ことがWordPressのスキルがあることの証明になります。

          ★【初心者向け】Webデザイン勉強のおすすめ本
          https://webdesigner-go.com/study/book/#WordPress

          WordPressのテーマの作り方の本などは↑の記事で紹介しているので参考にしてみてください。

          3. WindowsのPCでヒラギノフォントが無いが大丈夫なのか?
          個人でフリーランスで仕事をする場合(主に在宅ワーク)、ヒラギノフォントが無いと、他の方から送ってもらったデザインデータでヒラギノが扱えず致命的なシーンはたしかにあります。自分でデザインを制作する際もヒラギノフォントは重宝します。コーディング上はそれほど困りません。
          ただ、会社でWindowsPCを使って働く場合は、ヒラギノフォントが含まれているモリサワパスポートというフォントパックを使うケースがほとんどなので困ることはありません。
          フリーランスで働く時になったら、Windowsに高額なヒラギノフォントを入れるよりは、最初からヒラギノが入っているMacを購入した方が無難だとは個人的には思っています。

          すごく細かいことですが、下記の表記と誤字に気をつけた方がいいです^^
          デザイン作業はかなり神経を使う作業なので、こういった文章の表記にも細心の注意を払っておくとそれだけで高評価になります。
          future→feature
          wordpress→WordPress
          windows→Windows
          ヒイラギフォント→ヒラギノフォント
          「ホームページ」も「Webサイト」と言ったほうがプロっぽいです笑

          細かくてすみません。。特に「WordPress」の表記は重箱の隅をつついてくるエンジニアなどからかなり突っ込まれやすいです笑…

          また何かご質問などあれば、いつでも書き込んでください。

          • 詩乃 より:

            ありがとうございます。
            featureに載せるWebサイトは、出来れば友人などのWebサイトなどの本物がいいですが、架空サイトでも、大丈夫ということでしょうか?

            スペルミスごめんなさいm(_ _)m
            わかりました、本番では必ず気をつけます!ありがとうございます。

            WordPress仕事の現場でサッと使える!デザイン教科書、早速購入してみました!

            JavaScriptも学びたいと思うのですが、ねこポンさんのオススメの本などあったら良かったら教えてください(*^^*)

            • ねこポン より:

              はい、架空サイトを載せます。なかなか友人や知り合いのサイトを作れるケースは少ないと思うので、基本的には自分で考えた架空のサイトを載せましょう。未経験の方のポートフォリオはそれが一般的です。

              WordPressの書籍、購入されたんですね!サンプルのサイトがきれいなカフェサイトなので勉強するのが楽しいはずです。

              JavaScriptについては、JavaScriptを簡単に記述できる「JQuery」を勉強すればOKです。下記の記事で紹介している本がおすすめです。実際にスライダーやトグルメニューなどを作りながら、jQueryの文法が学べるので実践的な本です。
              https://webdesigner-go.com/study/book/#jQuery

  8. ぽるな より:

    ねこポンさんはじめまして。
    1年ほど前からずっと参考にさせてもらってます!w
    1年ほど前、私は情報処理科の専門学校でエンジニアを目指していたのですが、プログラミングの勉強についていけず、挫折してしまいました。そのとき、ねこポンさんのサイトと出会い、webデザイナーを目指そうと決意し、今はwebクリエイター科に転科し、頑張っていますσ(^_^;)
    あのときは本当に救われたので勝手に感謝しています。w

    1つ質問なのですが、私も極度の人見知りで重度のコミュ症とあがり症を併発しておりますw (~_~;)なので、プレゼンがとても苦手です….みんなの前に立つと緊張して頭が真っ白になり、それを想像してプレゼン直前に鬱になってしまいます。

    やはり、webデザイナーにとってプレゼン能力は必要不可欠でしょうか。それとプレゼンで上手く話せるコツなどありましたら教えてください。

    前置きが長くなってすみません!これからも応援しています!

    • ねこポン より:

      ぽるなさん、はじめまして!
      そんなに長くこのサイトを見ていただいてるんですね!プログラミングの勉強は挫折しやすいですよね。。このサイトがWebデザイナーを目指すきっかけになれて嬉しいです。

      >webデザイナーにとってプレゼン能力は必要不可欠でしょうか。
      現場にもよりますが、「多くの人の前で話すプレゼン力」はあまり必要ないと思っています。自然な身振りだったり声の抑揚とか人前で説得力のある話し方をあえて磨く必要はないです。Webデザイナーにもいろんな働き方があって、フロントに立つのはディレクターのみでWebデザイナーは黙々と作業に集中できる環境もあれば、Webデザイナーもクライアントに積極的にヒアリングする現場もあります。フリーランスになれば一人でクライアントとお話する機会もありえます。なので、正直、現場次第です。最初のうちは黙々とデザインやコーディングに集中できる環境のほうがスキルアップしやすいと思うので、そんな現場を選んだほうがいいですね。僕がWeb制作会社で働いてた時も、クライアントと話すことは月に1回くらいで、その際もディレクターに金魚のフンのようにくっついていくだけでした笑。

      ただ、「多くの人の前で話すプレゼン力」は必要ないですが、自分の作ったデザインについてディレクターや上司にわかりやすく説明するシーンは多いです。それを「プレゼン」というかはわかりませんが、一対一で相手が理解しやすいように認識の齟齬が生まれないようにわかりやすく説明することは重要です。

      >プレゼンで上手く話せるコツなどありましたら教えてください
      上の話ともつながっていますが、相手が理解できるように話すコツはスキルというよりも「思いやり」だと思っています。相手が何を知りたいか?何に困っているか?どんなことを疑問に思う可能性があるのか?を先回りして準備して考えておくことで、プレゼンも普段の仕事上のコミュニケーションもうまくいきます。なので、「思いやり」と「準備」が重要だと思っています。僕もプレゼンは超苦手です。。。だから当日しゃべる内容をすべて台本か箇条書きのメモにして事前に書き上げておきます。そして一人で気持ちを込めて読み上げて90%くらい暗記しておきます。そうすれば当日は箇条書き程度のメモを片手に余裕を持ってしゃべることができます。

      あまりプレゼンのことは意識しなくていいですよ。たどたどしくても自分のデザインの意図をきちんと説明できることと、自分の作業内容を正確に伝えられたらそれで十分です!こういう基本的なことすらできない人が世の中にはびっくりするほどいっぱいいます。だから思いやりを持ってわかりやすく話せればそれだけで高評価です。

      Webデザインの勉強、楽しみながらがんばってください^^

      • ぽるな より:

        返信頂きありがとうございました!
        とても参考になりました。また分からないことができたら質問させてください(⌒-⌒; )

Webデザインのご質問やサイトの感想など、お気軽にどうぞ!

みなさまからのコメントを元に記事を作成することありますので、あらかじめご了承ください。
メールアドレスが公開されることはありません。
こちらで承認後にコメントは表示されます。
* が付いている欄は必須項目です。

  • 管理人(ねこポン)について

    週3日だけ会社で働く30代前半ウェブデザイナーです!
    インテリ風&仕事できる風を醸し出す腕前では右に出る者はいませんが、電話すら怖くて取れないし、無断欠勤してしまい自宅に警察が来たほどのコミュ症ポンコツ人間です。
    現在Web業界5年目。事業会社とWeb制作会社のウェブデザイナーを経て、フリーランスになりました。

    ★ 僕の20代まるごと黒歴史ストーリー

    最近ちょこっと『月曜から夜ふかし』に出演しました↓

    ★ 『月曜から夜ふかし』にちょこっと出演したら『BizSPA!』さんにインタビューしてもらいました!

  • なんでもWebの質問受け付け中 (^o^) /♪

  • おすすめのWebデザインスクール一覧

    授業料は無料?有料?通学式かオンラインなのか?など、金銭面や自分の生活スタイルに合わせてスクールを選びましょう!プログラミングを無料で学べるスクールも紹介!

    スクール名 料金 授業形式 ジャンル 就職支援

    求職者支援訓練
    ハロートレーニング
    無料
    (教材費のみ)
    通学
    (約6ヶ月/週4〜5日)
    Webデザイン ハローワークによるサポート
    プロによる総評

    一番おすすめのスクールは国の運営する求職者支援訓練(ハロートレーニング)です。授業料が無料!しかも約6ヶ月という期間がWebデザインの基礎スキルを習得するのに十分な長さです。僕自身も求職者支援訓練を経てWebデザイナーになりました。
    東京にはWebデザイナー系の訓練校は6校ほどあり、各地域にも1〜3校ほどは見つかるため、どんな人も通いやすいのもおすすめのポイントです。
    ふだん税金を払っているので、このようなスクールはしっかり活用させてもらいましょう笑。


    失業保険が受給できる方は職業訓練がおすすめです。期間が約3ヶ月と短くやや理解が浅くなる点は不安ですが、復習や独学で補えれば問題ありません。最近は数は2校ほどで少ないですが6ヶ月コースも登場しました!
    スクール名 料金 授業形式 ジャンル 就職支援

    LIG
    有料
    (¥450,000 〜)
    通学
    (6ヶ月)
    Webデザイン 転職セミナーあり/LIGへの採用実績もあり
    プロによる総評

    金銭的に余裕があればLIGを検討しましょう。超有名Web制作会社LIGによるWebデザインスクールです。現役のプロデザイナーが講師で、Mac&デュアルディスプレイという最新設備で学べます!LIG運営のコワーキングスペースも無料で使い放題。生徒のレベルによってはLIGへの就職も可能です。

    詳しくはこちら

    スクール名 料金 授業形式 ジャンル 就職支援

    CodeCamp
    デザインマスターコース
    有料
    (¥148,000 〜)
    オンライン
    (2ヶ月〜)
    Webデザイン キャリア支援あり
    (就職エージェントの紹介)
    プロによる総評

    CodeCampはオンラインのWebデザインスクールです。低価格ながら講師から直接指導とフィードバックを受けられるのが最大の特長です!おすすめのコースは「デザインマスターコース」。コスパ重視で講師と対話しながら学びたい人に最適なスクールです。

    詳しくはこちら

    スクール名 料金 授業形式 ジャンル 就職支援

    TechAcademy
    Webデザインコース
    有料
    (¥139,000 〜)
    オンライン
    (4週間〜)
    Webデザイン 転職サービスあり
    (スカウト制度)
    プロによる総評

    4週間から短期で受講可能なオンラインのスクールです。週2回メンターにビデオチャットで質問ができ、毎日15時〜23時の間に不明点をチャットで質問可能。「Webデザインコース」がおすすめ。ある程度自習ができて最低限のメンターによるサポートが欲しい人におすすめのスクールです。

    詳しくはこちら

    スクール名 料金 授業形式 ジャンル 就職支援

    プログラマカレッジ
    無料 通学 プログラミング あり
    プロによる総評

    『プログラマカレッジ』は20代限定の通学式で完全無料のプログラミングスクールです。無料なのでエンジニアになりたい方はぜひ挑戦してみてください。スクール側は就業先の企業からお金をもらうことで無料で運営をしています。とはいえ授業の質は高いと評判です。『プログラマカレッジ』の卒業生による体験談記事はこちらです。

    詳しくはこちら

    スクール名 料金 授業形式 ジャンル 就職支援

    GEEK JOB
    無料 通学 プログラミング あり
    プロによる総評

    上で紹介した『プログラマカレッジ』と同様の20代限定の通学式で完全無料のプログラミングスクールです。プログラマカレッジは決まった時間に通学しますが、GEEK JOBは個別指導なので自分のペースで通学できます。エンジニアになりたい方は、自分の生活スタイルに合わせてどちらのスクールに行くか検討してみましょう。就職率97.8%は驚異的です!

    詳しくはこちら

    Web制作会社を歩き回れるゲームを作ってみました!ぜひ探検してみてください。(注意:音が出ます!)

    一番上へ