制作実績、制作ツール

2015-11-24 制作記

現時点での制作実績です。制作する度に追加していきます。最新のものから順番に記載します。

制作物一覧

基本的に個人サイト、練習用サイトです。

架空医療系サイト（トップページのみ）

架空医療系サイト

■使用言語等

BootStrap-sass

■制作期間

1.5日（デザインカンプ10時間、コーディング4時間）

■ポイント

定番レイアウトをBootStrapにて制作できることを目標にしました。既存の医療系サイトを多数参考にしましたが、デザインから作業を始めました。引き続き、デザインカンプ→コーディングの一連作業の勉強、 Photoshop、BootStrap、SASSの勉強を目的としております。 Photoshopにてバナー制作も初めて行いました。

■苦労した点や学んだこと

ほとんど既存サイトを参考にしている定番なデザインとはいえ、一から作るのは苦労しました。SASSについては今回から本格的に導入しました。今回は変数の利用とスタイルのネストを覚えました。

デザインカンプの前にワイヤーフレームを作るべきだと痛感した。
初めてのバナー制作でPhotoshopの使い方がわからず苦労した。

書籍掲載の練習サイト

練習サイト

■使用言語等

BootStrap-sass

■制作期間

2日（デザインカンプ1日、コーディング1日）

■ポイント

Webデザインの現場ですぐに役立つ Photoshop仕事術を見ながら制作しました。 Photoshopによるデザインカンプの制作、そこからBootStrapを使用したコーディングの一連の流れを勉強する目的で制作しました。本の少しですが、sass(.suss方式）のコーディングもしました。 sassは次回以降のコーディングに本格的に組み込みます。

■苦労した点や学んだこと

Photoshopについて、基本的な操作や考え方が少しわかりました。（レイヤーの仕組み、アセット抽出、クリッピングマスク等） Bootstrapのグリッドレイアウトの仕組みも何となく理解しました。

前述の書籍がPhotoshopCC2014対応で、2015に無い機能の記載が多く苦労した。
Photoshop自体初めてで基本的な操作や仕組みがわからず苦労した。
Bootstrapの基本がわからず、しょうもないところで時間がかかった。

友人のギター教室サイト

■使用言語等

WordPress

■制作期間

1日

■ポイント

WordPressカスタマイズの勉強を目的に制作しました。カスタム投稿、カスタム分類、カスタムフィールドを設定しています。それぞれの実装はプラグインを使用しています。

■苦労した点や学んだこと

カスタム投稿等の存在自体知らなかったのでそれ自体を理解するところから始めました。また、使用テーマ(attitude)がWP初心者のカスタマイズには向かない複雑なテーマでカスタムフィールドの出力など苦労しました。

botよけったー

■使用言語等

HTML5,CSS3,jQuery,CakePHP,MySQL

■制作期間

３週間程度

■ポイント

主にCakePHP、jQueryの勉強を目的に制作しました。TwitterAPI1.1使用です。 Illustratorにてデザインカンプを制作しました。完璧ではないですが、レスポンシブにも対応しました。

■苦労した点や学んだこと

とにかく初めてづくしなので、手を動かしながら一つずつ学んでいきました。悩んだこと多数ですが、その中からいくつか抜粋します。

Illustrator自体が初めてだったので使用方法に戸惑った。
デザインも初めてで、配色、レイアウトなど迷った。
CakePHPが(PHPも)未経験なので、言語仕様を都度調べながらの作業となった。
TwiiterAPIも初めて。PHP用のTwitterAPIライブラリがあったがうまく動かず。

当サイト

t-t-portfolio

■使用言語等

HTML5,CSS3,jQuery,WordPress,CakePHP

■制作期間

一週間程度

■ポイント

ブログ部分はWordPressにてオリジナルテーマを制作しました。

■苦労した点や学んだこと

ブログ部分のWordPressについて、テーマをイチから作ったことはなかったので、調べながらの作業となりました。まだまだ制作途中であり、もっと良くしたいと思います。 HTML4,CSS2の実務経験がありますが、HTML5,CSS3は今回が初めてでした。新しい要素、スタイルはまだまだ知らないものも多数あるので、制作全般を通して学んでいきたいと思います。