プログラミングで何を作ればいいかわからない【作りたいもの探し方】

プログラミングの基本を勉強し始めたけど、次に何を作ればいいのかがわからない…

単純なwebサイト

入り口としてHTMLやCSSを学んだ後に悩むのが、具体的にどんなサイトをコーディングすればいいかということです。

いわゆる模写コーディングと呼ばれるものですが、単純にこのサイト良さそうだなと思うものでいいんですが、それでもなかなか決まらないこともありますよね。

その場合は無料で配布されているデザインを元にコーディングの練習を行うのが良いです。

なぜならコーディングの実際の仕事ではサイトを見て真似るということはなく、上がってきたデザインファイルを元にコーディングをしていくことになるからです。

お金がかかる

ここでの問題は上がってくるデザイン＝通称デザインカンプはPSDやAI、XDといったソフトで作られたファイルで、それを開いて確認するにはそれらのソフトを購入する必要があるということです。

それぞれフォトショップ・イラストレーター・AdobeXDというソフトが必要になりますが、このうち無料でも使えるのはXDのみになります。

フォトショップ・イラストレーターも初回7日間無料とかはあるのですが、これでは間に合いませんよね。

最安で使えるプランでフォトショップが税抜き980円、イラストレーターが税抜き2480円なので、まずはフォトショップから始めるのがいいと思います。

無料デザインカンプの探し方

PSDで作れられたデザインカンプですが、かなりの数無料で公開されているものがあります。ただし海外のサイトが多かったりもします。

そういった海外のサイトをまとめてくれた日本語のサイトもたくさんあるので探すのに苦労はしないと思います。

「PSD webデザイン　無料」等で検索すればたくさん出てくるので、良さそうなデザインのPSDをダウンロードしてきたらOKです。

仕事を取るには自分のポートフォリオ（作品集）のページを作る必要がありますが、「ポートフォリオ　デザイン　PSD」とかで検索すればそれも見つかります。

3つほどPSDからのコーディングを終えたらそれを実績として、自分のポートフォリオサイトを作るのが一番早いのではないかなと思います。

レスポンシブデザイン

PSDを探す際にはモバイル向けのレスポンシブデザインの方もついているものを探すのが良いのですが、意外と少ないようです。

仕事でもPC版のデザインだけ渡されて「レスポンシブはいい感じに作って」と言われることも多そうですし、その場合はPCデザインから自分で工夫してレスポンシブデザインを作成するいい訓練になると思います。

これくらいできるようになれば準備としては上々かなと思います。

機能を含むwebアプリ

こちらはHTMLやCSSから一歩進んでPHPやRubyといった言語を使って色々な機能があるwebアプリを作ろうとした時に、何を作ればいいんだろうと悩んだ場合向けです。

ご自身で使っているSNS、例えばツイッターやfacebookを使っているようであればそれを真似して作ってみることで全然問題ありません。

確かに自分でアイデアがあるのであればそういったwebアプリを作ってもいいんですが、アイデアの審査が採用に関わってくると余計な審査項目が増えるような気もします。

もしアイデアや企画にも自信がある！という場合には自分でどんなwebアプリを作るかまで設計していもいいかもですね。

というわけで自分で使っているサービスか、使いたいと思っているサービスなんかを真似ればOKです。

それすらも無いという場合はあまりweb関連に興味が無いということなので目指す方向を修正する方が幸せになれるかなと思います。

APIを利用したマッシュアップ

オリジナルのアイデアが盛り込まれたwebアプリを作りたい！という場合にはマッシュアップが手軽です。

今では当たり前ですが、例えばGoogle Mapを自社サイトに埋め込むとかそういった外部サイトのAPIを利用して自サイトと組み合わせてサービスを作るという形です。

「web api マッシュアップ」などで検索すると色々見つかりますが、やはり利用が一番多いのはGoogle Mapのようですね。

これは私が個人で作った例ですが

みたいなwebアプリを作ったことがあります。さらに自分の携帯で撮った写真も登録できるようにするなど機能追加も行いました。

採用試験の時はこのサイトも見られていたみたいですが、このサイトを作ったから採用に至ったのかまではわからないですね。

一応オリジナルアイデアのサイトを作ること自体はそこまで難しくないかなという一例でした。

採用時に重視すること

PHPやRubyを利用したwebアプリを作ろうとしている、ということであればそれらを実績に就職試験やお仕事を頂こうという目標があるかと思います。

採用試験時に実績として見られる点としては

こんなところかなと。

以外と実績アピールしたサイトは実際に使って審査されているというお話でした。

具体的には？

何らかのインプット・アウトプットというのは、例えばユーザーが商品について口コミを書く、その口コミを商品ページの詳細に表示する。Amazonなんかがそうですね。

そしてその際にユーザーが悪意のあるセキュリティの穴をつくような入力をしても適切に処理しているか？

webセキュリティについては以下の記事に書いています。

初心者がwebアプリを開発するなら知っておきたいセキュリティの話

2019年6月17日

あとフレームワークを使っているかも重要視されると思います。既にあるような機能を一から作成することは勉強にはいいんですが、現場では「車輪の再発明」とされ時間の無駄とされる場合が多いです。

個人的には一度イチから全部作ってみて穴だらけのプログラムを作る経験も必要と思うんですけどね。

公開されるサービスでそれはできないので、できれば自分の勉強としてその辺の失敗は経験しておくのが良いです。

Gitが使えるというのは会社ではチームでの開発になることが多いからです。Gitの何たるかは自分でも完璧とは言えないので今後記事にまとめてみたいと思っています。

まとめ