Atsu Portfolio

最近何も記事を投稿していなかったので久々の更新です！以前Jsの学習をしておりましたが、あれから間もなく知人からサイト制作の打診があったので近頃はお仕事と職探しの傍ら、そちらを制作させていただいております。

現状辿っている流れとしましては、

• 大まかに参考サイト含め知人からヒアリング
• 自身が契約してるサーバーにて架空の内容のテストサイトを制作
• 骨組みがある程度形になった段階毎で知人に報告

となっており、現在テストサイトの記事部分がある程度形となったので一回目の報告を先日行いました。今後も段階毎に報告を重ね、まずはテストサイトの完成を目指します。その後本番に向けて改めてヒアリングを行い、改修及び調整予定です。

そして本番環境に以降後に不具合がないかの最終確認を行い知人からの許可も降りれば晴れて公開運営していきたいと考えております。今回もカンプなしの、WordPressでいきなりコーディングから取り掛かりああでもないこうでもないと考えながら制作しております笑

従来同様の制作箇所

各記事ブロック

• 見出し(h4まで)部分
• 段落部分
• 箇条書き(通常、番号双方)部分
• 定義リスト部分
• 吹き出し(左右)部分
• 画像ブロック
• 記事カテゴリー、投稿日と更新日の出力

各機能ブロック

• 記事シェア機能
• コメント機能
• 関連記事機能
• 前後リンク機能

各記事ブロック、各機能ブロックのあしらいや余白の指定は完全新規で指定。

現状新規で導入した制作箇所

記事ブロック

• 引用部分
• 文言囲み(各箇条書き、段落)部分

各機能ブロック

• タグ機能
• 目次機能
• 投稿者詳細表示機能
• ソースコード表示機能
• 記事前後リンク機能にサムネと一覧ページへのアクセスも追加

先程同様各ブロックのあしらいや余白の指定は完全新規で指定。今後新しい機能やブロック等追加した場合は今後の投稿記事でご紹介したいと思います。

URL

制作途中のテストサイトとなりますが、もしご覧になりたい方がいらっしゃいましたら下記からアクセスしていただけます。

https://brotes.blog/css_sidebyside/

当サイトは現在就業先のキャラクターデザイナーを目指している同僚に、こちらからサイト制作を依頼したサイトです。勿論当サイトに掲載する許可は頂いております。

2022/10追記

当方応募の都合により急遽、一時的に個人情報保護のためイラストすり替えやSNS情報を伏せコンタクトページや作品のコメント送信機能も無効化した複製サイトを創設しました。該当のサイトは別ドメインで運用しておりますが、そちらを目的にされていた方はご了承いただけますと幸いです。

複製サイトURL

https://wp-test02.xyz/

8/29 追記

昨日8/28に無事納品完了しました。サイト完成後同僚の方にWordPressでの記事作成方法をお伝えしたのですが、驚くことに納品前にtwitterの表示崩れ、コメントのみ依頼者に通知がいかない問題が発生汗。

色々不具合が発生しましたが何とか問題を解消し無事納品完了できて何よりです。今回お代こそいただいておりませんが人様のサイトをヒアリング・企画・制作・納品まで行ったのは初めての経験だったので非常に良い経験となりました。

今回のようにtwitterのアップデート等で不具合が発生する可能性があるので、今後も問題が発生すれば対応、自身の方でも定期的にパトロールを行っていきたいと感じました。あと残る工程は同僚の方が記事を書くだけです笑

最後にこれは私事ですがせっかくサイトを制作させてもらったので作って終わりではなく、同僚の方には忙しい中とは思いますが是非納品したサイトを運用してもらって日々のお仕事の受注や作品の発信、これからの転職活動のツールとして役立ててもらいたいです。

8/2 追記

7/31にサイト自体は完成致しました。残る工程は同僚の方にWordPressでの記事作成方法をお伝えすることと、現状必要なイラスト画像と記事原稿待ちの状況です。原稿を元に記事の作成や画像圧縮の加工等必要でしたら私自身が請負予定です。

幾つかの記事掲載が完了次第、同僚が管理するSNS(主にTwitterを利用されています。)などで公に公開していただく予定です。

サイトの目的とターゲット

現状でもPixivやSKIMAといったサイトで作品公開と仕事の請負をされていますが手数料が発生するため、サイトの目的は手数料の撤廃(自分の学習目的もあったため、サイトは無料で制作させてもらいました)・認知度アップ・お問い合わせ増加としました。

メインターゲットはファン含む同僚のフォロワーで、サブターゲットは本人がイラスト関連の就職活動中ということもあり企業の採用担当者に設定しました。

初めて試みたこと

これまで同様企画(ヒアリングや提案)・ツイッター埋め込み・画像圧縮・Jsの使用に加え、下記を初めて実装してみました。

• ランキングの設置(プラグイン)
• 記事最終更新日の追加表示機能
• 作品記事へのコメント機能
• PC表示時のみメニュー「イラスト」部分カテゴリーのドロップダウンメニュー
• トップページのモーダルウィンドウ(Lightbox2)
• イラストが主役であるため主張しすぎず、かつイラストに合う丸みを帯びた可愛らしいデザインを心がけた

久々の更新です。制作は現在従事中のお仕事の傍ら細々と行っておりましたが、自身のポートフォリオサイトに反映させるのは久々です。このサイトは初めて制作した人様のサイト(内容のみサンプルに差替)のコピーサイトです。

2026/06追記

※ドメインを解約したため、現在画像でのみ閲覧可能です。

初めて試みたこと

• 企画(知人にヒアリングしそれを元に制作)
• 画像圧縮でファイルサイズを軽量化
• 検索窓の設置
• ツイッターの埋込
• WordPressで初めてjQuery及びJavascriptを使用

制作の目的

Web制作実務に就くためのツールとしてのポートフォリオサイト制作。これまでの制作物や現在学習中の内容を通してWeb業界の採用担当者の方に自身のことを把握していただくために制作しました。

制作時期・期間

2020年4月3日～2020年5月31日(当記事作成工程含まず)の約2ヶ月(サーバー契約・企画構想・レイアウト・コーディング・記事作成・自己判断修正全て含む)。制作人数1人。制作時間約200時間(おおよそです)。また、Webとは無関係のお仕事を週4日フルタイムで勤務しながらの制作。

制作サイト概要

意識した点

初のWordPress・サーバー契約・常時SSL化を行ってのオリジナルサイト制作。

制作物や学習内容を映えさせえるため、また時間にタイトな採用担当者の方を考慮し自身なりにではありますが情報量を抑え、控えめでシンプルなデザインを心掛けて制作致しました。

無彩色(主にグレー)を多く用いた理由は ❝他の色を引き立てる調和の色❞ とあり、自身の自覚するイメージと合致したためです。
アクセントに一部金色を用いたのは ❝「目標」を持ち、そこに向け「長い努力を続けた」人の色❞ とあり、そうあり続けたいと思っているため使用。

色についての引用元：
DTPサポート情報・色についての知識(前編)
東京品川カラーセラピーサロン＆スクールWHITE-TARA

ロゴ作成にあたり自身のイニシャル「AK」をモチーフに。点は不確かな現時点、不等号「<」を用いたのは「研鑽を経て今後発展する未来へ」という願いを込めています。

メインビジュアルに使用した画像もWebを通じ自身と同志、そして顧客の発展を図れるような制作者になれることを願い今まさに飛び立とうとしている画像を用いました。尚使用した画像はプロフィール写真同様、学生時代欧州に旅行で訪れた際撮影した画像です。

これまでにもWeb上で紹介されている様々な情報を参考にしてきましたが、今回は最近本格的に始めたtwitterで紹介されていたtipsも参照し実装や応用を行い、見出しや一部ボタンのデザインに用いさせて頂きました。

Chrome、firefox、edgeの他当方所持しているiphone6での動作は確認済みですが、IE11に関しては試行錯誤するも断念しました。

参考・参照サイト

• Kieka(レジンデコールの販売会社サイト)
• STUDIO HAS(京都のデザイン制作会社)
• UNDERLINE(徳田優一さんポートフォリオサイト)
• その他様々なサイトやポートフォリオサイト

今後の目標

今回のポートフォリオサイト作成においてWordPressの基礎知識は身に付いたと思うので、次はJavaScriptの基礎知識を身に付けていきたいと思っています。ただ、当サイトはタイトルの通り暫定状態での完成なので今後の学習で学んだ事のアウトプットサイトとしても利用し徐々にアップグレードしていきたいと考えております。