IORI-ST

ブログをリニューアルしました

2019年最初の記事です。今年もよろしくお願いします。

さて、一つ前の記事「ブログのサーバー移転&SSL化をしました」のまとめでも書いていた通り、この度本ブログをリニューアルしました。大きなアップデートはこれで3回目になります。

1回目は a-blog cms の公式テーマ「blog2018」のレイアウトのままパーツのスタイルを変えたもの。昨年10月に公開した2回目は、全てのファイルを1から揃えたモノトーンのデザイン。そして今回が、XDで予めデザインをおこし、a-starter-kitで開発環境を整えて作成したテーマです。

仕事の案件では、主にデザインを考えてファイルを作成するまでが私の役割となっているため、以前から一度「自分で作成したデザインファイルを自分でコーディングする経験」をしたいと思っていました。そんなところ、ちょうど年末年始の長期休暇に入ったので、年末から作業に入り、1/13までで元々予定していたところまで作り終えたという感じです。ここからは、ブラウザ別の崩れのチェックと調整、使っていて気になったパーツの修正、ファイルの書き方の見直し、サブカラムの目次の導入などをしていきます。(目次は時間がかかりそうなので、それまでは当分エントリーリストで代用します。)

せっかくなので、ここではリニューアルの方向性と所感について少しまとめておきます。


リニューアルの方向性と所感


子ブログ「works」を設置



ポートフォリオとして機能できる「works」というコンテンツを追加しました。

webの世界に足を踏み入れてから、「自分の考えややってきたことは発信していくべき」「自分が作ったものはネットに残していくべき」そんな意見を耳にすることが多くなりました。そんな中で、ブログというテキストメインの場所だけではデザイナーとして不十分なのでは…と感じ始め、作ったものをギャラリーのように並べられる場所を追加しました。

これからは、ここで自分が個人的に作ってきたものも管理しつつ、事あるごとに見返してアップデートしていけたらと思っています。


管理画面のボタンの位置を固定



管理ボックスとエントリー編集ボタン類を少しアレンジしました。

このきっかけとなったのは a-blog cms Training Camp 2018 Spring で紹介されたフォルトゥナの坂本さんの事例。エントリー編集画面の保存ボタンを画面下部に固定するアイデアに、これはかなり利便性が向上するのでは…!と感動し、今回のテーマ作成で取り入れました。

ここで固定した管理ボタンはエントリー編集画面のものではなく、全体で共通して表示される管理ボックスです。ログイン中でもできるだけ外部から見ている形でサイトを表示したかったため、管理ボックスの背景は透過にして、管理ツールの圧迫感を画面全体の面積に対してできるだけ抑えるようにしました。

またエントリー編集に関係するボタン類も、使わないものは取り除き、スマートにデザインに溶け込むような形にしました。


XDファイル元にコーディングして感じたこと


今回の1番の挑戦だったファイルありきのコーディングでは、単刀直入に、その難しさを痛感しました。

これはコーディングスキルに関してのことだけではなくて、例えばXDの指示通りにパーツを配置してもファイルとイメージが異なってしまうなど、伝え方の面も含めてです。1pxまでこだわるのがデザイナーだ、という言葉も聞いたことがありますが、いくらファイルを作り込んでもそれはいわゆる地図でしかなくて、実際に運用していくものではありません。だからやはりこだわるのは数字ではなくて、ページの中でのコンテンツの展開やパーツ同士の配置感など、「そのデザインの背景にしっかりと軸を通すこと」なのだと実感しました。

また今回は、コーデングを進めてから不具合に気づき、デザインを変更した部分も少なからずありました。しかし仕事ではこの部分は分業しているので、もし同じようなことがあればエンジニアさんの手を止めてしまいます。そのようなことをなるべく起こさないためにも、エンジニアさんが回遊しやすい情報のまとめかたについて、ある程度の指針を作るのことも必要なのではないかなと思いました。これに関しては、今後開催予定のAdobe XD Meetingなどでも取りあげて、是非エンジニアさんの生の声も聞いていきたいですね。


今後のブログの目標と方針


サーバーの引越しでSSL化やリニューアルなど、本ブログでやりたかった作業が落ち着いたところで迎えた新年。このブログの立ち上げは2017年7月7日(ラッキーセブン並び!)なので、特に節目でもないのですが、これからはもう「少し簡潔に短くまとまっている記事」を意識していけたら、と考えています。

1つのテーマであらゆる事例が紹介されているものは、参考にはなりますが、読み手にとっては情報の取り込みが大変でもあります。それを特に感じるのが、作業と並行して情報を探している時です。振り返ってみると、そのような時は、ある単語についてピンポイントで書かれている記事が目につくことが多いように感じます。

私はもともと作り込んでしまう性があるので、書き始めるとなんでも長くなってしまうのですが、このように長々と書き連ねるのは書き手の目線なのかなと。それなら、セクションごとに記事を細分化して、より簡単に目当ての情報にたどり着ける方が、読み手としては受け取りやすいのでは、と思うのです。

そのような背景で、これからもWebに関して勉強したことや得た知識などをどんどんストックしていきたいと思います。本年も変わらずお付き合いいただけると嬉しいです。



Related Posts

Tags