MENU
アーカイブ
つな
医療従事者からWebデザイナーへ転職。現在はフロントエンドエンジニア。このブログでは私自身が異業種からWeb業界に転職した体験を元に、Webデザイナーやコーダーを目指す方に役立つ記事、サイト制作にまつわる知識や技術について発信しています(適当な日記もたまに)。

Webデザイン学習 1ヶ月と2週間

こんにちは。@nkichiishiです。

 

前回の学習記事から約1週間が経過し、本格的にWebデザイナーの学習を始めてから約1ヶ月半が経過しました!

 

その後の進捗を報告します。

目次

スクール課題のWordPress化

テックアカデミーを受講していた際に制作した”コーポレートサイト”にWordPressを組み込んでみようという目論見を立てました。

ポートフォリオサイトに作ったwebサイトを載せる際、スクールで作ったwebサイトも数として載せたいなぁ。と思ってたのですが、そのまま載せるのはただ”課題としてこなしました感”が否めません…。

なので、この際にWordPressを組み込み、実用に近い雰囲気を出そうとしました。 

書籍を買う

ン

そもそもどうやってHTMLで作った静的webサイトにWordPress組み込むねん???

このブログでWordPressをつかっているものの、テーマは無料のものをダンロードして使わせてもらってるし、作ったwebサイトをWordPress化する方法が全くわかりませんでした。。

 

なので、まずは本を購入。

 

 

全然仕事の現場ではないのですが、サッと使って開きながらぽちぽち!っとしていました。

でも仕事の現場にいない人間でも(無職っていう意味じゃないですよ。私は今無職ですが)内容はわかりやすくてオススメです!

phpファイルの分割

WordPress化するにあたってhtmlファイルをすべてphpファイルにしました。

 

htmlファイルだとトップページ1つと下層ページ2つの計3つのファイルでしたが、phpに分割するとファイルが10個くらいに。

 

本の通りにとりあえずやってみたけど、どこがどことリンクしているのか訳わからなすぎる。。

 

WordPress組み込むときは、慣れるまでちゃんとメモるなりしながらやったほうがいいですね…。

 

 

とりあえず丸二日かかって完成しました!

仮想Webサイト作り

ポートフォリオサイトに載せるWebサイトとして、もう一つくらい作っておきたいという気持ちがあったので仮想サイトを作ることにしました。

構想、デザイン制作

美容室のwebサイトは作ってるし、コーポレートサイトも課題で作っているので、何にしようかと悩んだ結果、自分の趣味や好きなことを盛り込んだサイトに決めました。

そのほうが作っていてワクワク度増しそうですし。 

  

私の趣味のひとつである寺社巡りをwebサイトにしてみました。(最近全然巡ってないけど)

神社やお寺の歴史が好き!というよりは、雰囲気や、そこで写真を撮るのが好きという分類ですが。

 

単に「趣味サイトを作りました!」だけでは、ほんとにただ作りたくて作っただけになってしまうと思ったので、どういう人をターゲットに取るか、コンセプトなども自分なりに考えて制作しました。

 

ワイヤーフレームをAdobe XDで簡単に仕上げ、デザインカンプはPhotoshopで制作。

構想からデザイン終了まで丸2日です。

コーディング

レイアウト自体はシンプルな構成でしたが、「THE JAPAN」な雰囲気を出したかったので、文章の縦書きに挑戦してみました。

 

縦書きにするにはCSSをちょっといじればいいんですが、レスポンシブが作りにくくてなかなかうまくいかず泣きそうになりました(泣)

 

 

 

結果なんとかできたのですが、スマホ版の縦書きWebサイトはなかなか使いづらいです。笑

ユーザーインターフェイスってやっぱ大事だよなぁ。。。

 

後になって思いますが、デザインはもうちょっと煮詰める期間が必要ですね。

コーディング段階でデザインカンプと若干かけ離れたものになってしまいました。汗

 

色々反省点がありつつ、コーディングも丸2日かけておわり、計4日で仮想サイトはほぼ出来上がりました!

まとめ

ポートフォリオに載せるWebサイトの制作はここで一旦終了です。

次は、Photoshop、Illustratorに慣れるためデザインの学習に時間を当てようと思います!

 

特にIllustratorは初めて起動して、醜いサカナの絵を描いて終わったっきりなので・・・。

ペンツール難すぎです

 

バナー模写をとりあえずやります!

目安は1週間みっちり!

 

頑張ります(´Д`;)

 

 

シェアする
  • URLをコピーしました!
  • URLをコピーしました!

コメント

コメントする

CAPTCHA


目次