40代目前の男がフリーランスを目指すブログ

40代目前の男がフリーランスを目指す為の日記です。

ポートフォリオ用ショッピングサイトの制作01

今は新たなポートフォリオとして、PHPを用いた簡易ショッピングサイトを制作しております。

今回のショッピングサイトの特徴ですが、

  • フレームワーク等は一切使わず、生のPHPでデータベースへの接続等を実施し、レコード取得もPHPのみで構築する。
  • CSSについては当初はBootstrap4を予定しておりましたが、微調整等が出来ない為に急遽、Grid Layoutでレスポンシブに挑戦。
  • アニメーション等においても、jQueryは使わず生のJavascriptにて実装。

これらを目標に、

管理者ページにて商品の「追加・修正・削除」機能を設け、一般ユーザーがカート形式での買い物シミュレーションをする事が出来るサイトを目指しております。

フレームワークを使わない為、ログイン情報の保存やSQL文、そしてPHPを交えたHTMLにGrid Layoutを織り込むという大変な作業の連続ですが、現時点でようやく管理者側による商品の取扱い機能の実装が完了しました。

今後PHPフレームワークを使用して実績を作っていくとしても、データベースへの接続におけるPHPの処理自体の内容を予め理解出来ていた方が習得もスムーズに行なえると思い、まずはPHPそのものを深く知る事を前提としております。

次からは一般ユーザー側として、「商品をカートに入れる・支払い画面に行く・購入決定の際のメールの送信(実際は送信しません)」を実装していきます。

Twitterに一連の登録・修正・削除の動作を動画にしておりますので、良かったら観て下さい。

『東京不穏詩 -Bad Poetry Tokyo-』の映画を観てきました。

今回はプログラミングの話とは異なりますが、先日、ホームページ制作にて関わった俳優さんからのお誘いで、彼が参加する映画を観てきました。

『東京不穏詩 -Bad Poetry Tokyo-』という邦画です。

http://www.imageforum.co.jp/theatre/movies/3126/

映画館に訪れるのは実に5年ぶりくらいなんですが、本当に面白い作品でした。
監督はなんとインド出身の「アンシュル・チョウハン」という方なんですが、ここまで東京の裏や日常のリアルな描写を作れる事に驚きでした。長年日本に滞在しているとの事でしたが、センスの塊とも言える程のクオリティだと思います。主演女優の名前も、その他の俳優の名前も知らない人達ばかりでしたが、非常に観ごたえがあって約2時間、全く飽きる事無く楽しめました。やっぱりプロの俳優の演技力は素晴らしいです。自分には絶対に出来ない世界だなと(笑)。

さらに、実は先日19日は舞台挨拶を行なう日でもあったので、何と出演俳優の皆さんが直接映画館にいらっしゃった為、人生で初めて俳優さんを生で見て話す事になりました。本当に新鮮で興奮する1日でしたね。

ホームページ制作のモデルとなりました俳優、真柴幸平さんとも直接お話し出来まして、出来栄えに関してお褒めの言葉を頂き、本当に嬉しかったです。デザインも可能な範囲でベストを尽くし、特にレスポンシブデザインについては妥協せずに検証した努力が報われた一瞬でもありました。

ポートフォリオ作成の為にホームページ制作の話を引き受けて下さいました真柴様、そしてデザインやホームページの実装、公開方法やブラウザに検索される為の作業を教えて頂いた皆様、心より感謝致します。

次回のプロジェクトも全力で頑張っていきたいと思います。

ようやく制作済みのホームページが一般公開出来ました

昨年11月から始動したホームページ制作のプロジェクトですが、昨年末に一度は制作完了したにも関わらず、レンタルサーバー選定やGoogle Search Consoleでの登録で随分と時間が掛かってしまいました。

ですが、ようやくWebブラウザにて検索ヒットされる様になり、無事に一般公開する事が出来て一安心です。

今後も少しずつ更新は行なっていく予定ですが、まずは本格的な業務を無事終了する事が出来ましたので報告致します。

Kohei Mashiba Official Homepage

Google Chrome等のブラウザでも「真柴幸平 ホームページ」等で検索を掛けると、恐らく早い順位で出てくると思いますので。
比較的オーソドックスなデザインのホームページですが、レスポンシブについてはPC版・スマホはもちろんの事、タブレットiPad等の媒体にも対応させましたので、宜しかったら一度完成品をご覧下さい。

次回からはまた新たなプロジェクトの報告を随時していきます。

ホームページの制作完了

ホームページ制作ですが、12月中旬位にデザインも正式に決まり、28日に無事コーディングも終わりました。

デザイン考案は本当に大変でしたが、それに伴い、AdobeXDやFigmaというデザイン制作ソフトも使いこなせる様になり、基本的なWebサイトの特徴やレイアウトの考え方も勉強出来たので、得られるものは多かったです。

そして本業のコーディングですが、Bootstrap4を使わず、生のhtml・cssで書きました。
ボタン機能を追加する際にjQueryを使用しましたが、今ではcss3にて簡単なアニメーション実装、そしてレイアウト調整がかなり楽になっている事。そしてSassの存在によって、容易に構造が把握しやすくなった事もあり、レスポンシブ対応もそこまで苦戦する事無く終わらせられました。

とは言っても、やはりiPadiPad miniにも対応させるとなると、それ専用のメディアクエリを用いる事となりましたが...。

来年頭から、有料サーバーの選定をお客様と相談しながら進めていき、無事決まれば晴れて一般公開です。ご本人様が心より満足頂けるか? そして世間の反応はどうなるか...? 多少なりとも不安はありますが、一般公開を楽しみにしつつ本年度を締めさせて頂きます。

では良いお年を。

『やさしいデザインの教科書』を読んで

現時点ではこれで最後にしますが、デザイン関連の書籍をもう1つ読んでみようと、瀧上園枝氏著書の『やさしいデザインの教科書』を読んでみました。

f:id:eewano:20191212103047j:plain

各ページの上段に1 - 3デザイン、そして下段にそのデザインの説明文を載せているという非常に読みやすい本で、これも参考になりました。
記載されているイラストや広告を見る限り、「お金と時間を掛けて丁寧に作られている」のが伝わってきます。本当に1つ1つの色や構成が意味をなしている事を実感し、自分もこういう優れたデザインの媒体を当たり前の様に作れたらなぁとしみじみ思いました。

結論としては、やはり日頃から色々なものを見ては感じ取り、それをデザインに落とし込む習慣なりを身に付ける必要があるという事ですね。これは「デザインという分野に対して好きであるか?」も重要な要素です。自分はどうなんだろうか...。

それにしても、『デザインに答えは無い』という言葉が身に染みます。
正解は無い。けれど、「良いデザイン・悪いデザイン」というものは確実に存在する。これは確かな事実です。人の感覚というのはそれ程曖昧だけど、確かなものである。

『デザイン力の基本』の書籍によるWebデザインの勉強

ホームページの制作において、デザインの確定は非常に重要であると教わり、フォントの選定やサイズ、マージン(余白)の正確な指定、色の使い方等、学ぶ事が多過ぎて未だにデザインカンプが完成しておりません。

本番を想定したデザインカンプを作る事がこれ程大変で、少しのズレや色使いやフォントの大きさまでも、妥協の許されない状態というのは非常に大変だと思い知らされました。
思えばデザインについては自分の感覚のみで考えてコーディングしてきたので、いざ一般に公開となると非常にアンバランスな出来になってしまう事に気付き、まだまだ最低限のデザインの考え方や作り方を速攻で学ぶ必要があると思い、下記の書籍を入念に読みました。

ウジ トモコさん著書の『簡単だけど、すごく良くなる77のルール デザイン力の基本』という本です。

f:id:eewano:20191209121048j:plain

Webデザインの「いろはの『い』の字も知らない」素人の方でも押さえておくべき、デザインの基本の基本を学べる内容となっております。

結論を言うと、読む価値は大いにあります。

とにかく、最低限把握しておきたい余白の使い方、フォントの選び方、色の使い方、ページ全体で表現したい内容の組み立て方が非常に分かりやすく書かれており、正に今の自分にとって重要な内容だと感じました。

やはりデザインの最低限のルールは知っておかないとどうにもなりません。本当に滅茶苦茶なレイアウトになります。それを思い知らされると同時に、大きなヒントを得られました。この書籍を糧に頑張ってデザインカンプを完成させたいと思います。

初仕事 -俳優のホームページ制作-

全く日記を更新していなかったのですが、実は11月から知り合いの紹介で初のWebサイト制作の案件を頂き、ついに本格的にお仕事が出来る様になりました。
そして、正式にオファーが来たので日記にてお伝え致します。

内容としては、とある俳優さんのオフィシャルホームページの制作ですね。Wordpressは使わずHTML5・CSS3のみの構成となり、コンタクトフォームにてPHPを使用するシンプルなサイトになります。
とはいっても、jQuery等によるアニメーションは導入しますので、可能な限り俳優さんや閲覧者に満足頂けるクオリティに仕上げたいですね。

...さて、自分にとっては今回の初プロジェクトは業務実績やポートフォリオの追加等、重要な案件でもありますので、企画からデザイン、コーディング全てを自分1人で行なっております。
もちろん経験者からのアドバイスを常に貰いながらの制作ではありますが、経験値を得る為にも、クライアントとのやりとりを含めて一連の業務のやり取りを全て自分で行なう事としました。非常に得られるものが多いのですが、それと同時に多大な緊張感があります(汗)。

企画書も本格的なものを作成し、クライアントの意向を汲み取ったサイトのデザインを考案。そして、ワイヤーフレームにデザインカンプも全て担当するとなると、非常にプレッシャーが掛かってくる事に気付かされました。
会社員時代も得意先に不具合の報告をしたり、対策報告書等を何十回も作成してきましたが、それとは別物の業務であるので、実質素人同然です。まずは自分のベストを尽くしてがむしゃらに仕事に専念する事に集中します。

また、今回の案件に当たり、ワイヤーフレームやデザインカンプを制作する為にAdobe XDを本格的に学びました。
Adobe社製品を使うのはおよそ5年ぶりですが、AdobeXD...本当に優れたツールです。ここまで簡単にホームページのレイアウトを簡単に作れてしまう事に驚きです。現代の技術の進歩は凄いです。本当に有り難い事です。

そして、ホームページのデザインも本格的に学んで即反映させていく必要があるので、SB Creative出版の『いちばんよくわかるWebデザインの基本』を読みました。

f:id:eewano:20191120091430j:plain

この本はサイトの構成や色の使い方、記事や広告等の並べ方をレスポンシブ踏まえて解説している書籍です。今まではコーディング中心であった為、いざデザインを踏まえたレイアウトとなると完全に自分の感性や思い付きでサイトを作って来た感がありますが、この本を一通り見て自分のサイトの作り方のマズさ、下手さ加減が良く分かりました(汗)。やはりデザインの勉強も非常に大事です。
例えコーディングメインに仕事をしていく事になったとしても、最低限のデザインや構成の仕方を学ぶ事は非常に重要だと痛感させられました。

という訳で、最善の結果を出せるよう、誠意を持って取り組んでいきます。