top of page
検索

ホームページを作るのって大変だ。

  • textfiber
  • 2024年5月28日
  • 読了時間: 7分

更新日:2024年12月11日

ようこそ佐川のHPへ。

無料で、ノーコードで作れるでお馴染みのWIXを使って、このHPは作られました。


このWIXでHPを作る前に、似たようなツールを3つ試しました。

・Adobe ポートフォリオ

・STUDIO

・Webflow

の3つです。

順に、どれがどれだけ大変だったか感想を述べていこうと思います。


Adobe ポートフォリオは、AdobeのBehanceというアプリを元々使っていた自分にとっては、テンプレートを選んだらあとはクリック一つで自動でほぼ完成!という画期的かつ一番ラクそうな代物でした。実際そうでしたし、テンプレ自体の精度も…、なんというか普通でした。

特段おかしくもなく、派手でもなく、堅実なサイトという感じ。思っていたより数は少なく感じました。

Behanceに載せている画像や文章をそのままマルっと流用してくれるので

いちいち自分で画像を選んでタイトルつけて etc... とかをやらなくて良い。

なんですが、ガチガチにテンプレのフォーマットが決まっているため、

「戻る」ボタンを少しオシャレにしたい(小さな控えめな丸+矢印にしたい)というときには、なんといちいち全ての作品ページのひとつ一つのパーツをいじる必要がありました。

見出しや小見出しの設定も上記同様です。

一つ変えたら自動で全部変わる、そんなシステムではなかったのです。

諦めました。だって、わたしは戻るボタンをいい感じにしたかった。


STUDIOは、いま多分ホームページ業界(なんだろう、そんなものあるんだろうか)では一番みなさんから慕われており、一部無料で、WEBデザイナーさんの多くもこちらのサービスを使われているのではないでしょうか。

かくいうわたしも、フリーランスになってからWEBデザインというものに少しずつ携わる

ようになっている最中、figmaで作ったデザインをそのままSTUDIOに持っていきましょうという作業をよく行なっています。しかしコーディングはできないので、わたしはあくまでデザインを整えるところまでです。

さて、STUDIOの謳い文句も「ノーコードでデザイン制作・リリースできる!」というものです。

なので、いまは仕事では下敷きを整える程度までしかやっていないけれども

ここで自分のHPを作ることができたらSTUDIOの使い方だってマスターできる、一石二鳥じゃないかと思ったわけです。

STUDIOには無料のテンプレートもたくさん用意されており、

海外の方向け(というか、海外の方が作っているのかな)というゴリゴリにEnglishなテンプレもいくつか発見できました。

わたしはなんとなく、日本語のサイトよりも英語のサイトを参考にしたほうが、

人と被らなくて良いのではないかという安直な思考からゴリゴリにかっこいい英語のアートギャラリー向けのようなテンプレを選び、そして詰みました。

かっこよさは感じますが、動線が複雑だったのでそもそもどこをいじれば良いのか途中で分からなくなりました。Aのパーツを触りたいんだけど、どこのタブに触れたら良いのかわからない、そんな感じでした。間違ってBのパーツを触ってしまい、Aに戻りたいのに戻れない(データが…? 消えた…?)みたいなことが頻発しました。

何を言っているかわからないかもしれませんが、わたしはそう感じました。

高度すぎたのです。No~高度。簡単なコーディングならできますみたいな玄人向けだと感じました。


最後にWebflowです。

こちらも一部のテンプレートは無料、海外向け、テンプレ自体も英語がメインです。

前述の通りわたしは英語サイトの方が人と被らなくて以下略ですので、

STUDIOよりも簡単であってくれと祈りながらテンプレを選び、制作画面へ進みました。

ここで気づいたというかテンプレを選ぶ時点で薄々気づいていたのですが、

制作画面も諸共すべて英語でした。

英語に少しカブれてるとは言え全部英語はやはり無理でした。

文字色を変えるはcolor だとわかるけど、パーツとパーツの間に線を入れたいときの設定項目の場所がわからない。

いちいち調べながら(訳しながら)作るのも気が遠くなりそうだと感じたので、諦めました。


ここまで試して、原点に戻ってきたのです。

WIX、わたしは実は、あなたを過去に使ったことがありました。

でもその時、正直少し野暮ったさを感じていたのです。

当時もテンプレートからいじっていったのか覚えてないのですが、

融通の効かないパワポみたいだなと思っていました。

でも、それも当然と言えば当然。わたしはWEBサイトのデザインなんかしたことがなかったのだから。文字のサイズは何ptがよくて、隙間はどの程度空いているのがよくて、全体の構成をどうしたらよいのかなどという引き出しが全くない状態でした。


おとなしくテンプレをそのまま使えばまだ改善の余地はあったのかもしれませんが、

デザイナーの性が出てしまいどこかを変えなければならないと躍起になっていました。


今回このHPを作るにあたっては、用意されている多くのテンプレートを拝見し、

どのあたりを変えればより自分らしくなるだろうかと考えました。

種明かしをすれば、このHPのベースもテンプレに非常に近いものであります。

デザイナーだからなんだかんだと言わずに、用意されているものをおいしく拝借しながら、変えられる部分を少しだけいじろうと腹を括りました。


そして、数十日を経て、作品ページを埋めることができました。

正直、ええ、正直にいえば、TOPページには作品をサムネイルにして載せたままにしたかったのですが、最早やり方がわかりませんでした。TOPページ=作品ページ、自己紹介ページ、ブログページの3つに分けたかったのにそれぞれの設定の仕方がまじで超複雑でTOPページが本当に謎のタイトルだけのページになってしまいました。

ピクセルアートのスマイリー☺︎は気に入っているのですが、コイツもTOPページ以降は回りもしないただのちょっと邪魔な飾りです。


わたしは勝手に、このサービスは触りたいところ、変えたいところにマウスオーバーすればその部分が簡単にダイレクトに直せるものとイメージしていました。過去に触った印象ではそうだったのです。

しかし、そこからサービスが進歩したのか、はたまた選んだテンプレの仕様だったのか、触りたい箇所の修正はより深い階層をいじる必要がありました。Adobeポートフォリオとは違って、一つ触れば他も自動で変わってくれる機能はあります。というか、個別に変えたいけど個別には変えられないところもある、というのに近いです。

わたしのこのHPには、全体を構成するテンプレートの中にWIXの「ポートフォリオ」のテンプレートがもう一つ入っているような構図になっています。

複雑ですね…。つまり作品ページのデザインを触りたいときには1階層違うところにあるポートフォリオの方の設定を変えてから、全体へ反映させないとだね、って感じ? は?


(12/11 追記 トップにポートフォリオを入れ込むの、出来ました。なんか色々いじってたらできましたがもう一回同じことやってと言われたら出来なさそう。それくらい一発じゃ分からない。ムズイ。)


PCとスマホでの見栄えもかなり大きく修正する必要がありました。ある程度は自動で調整してくれるけど、やはりかなり大味なところもありました。


あとこれは触ってみた全てのノーコードでHPを作れるカンタンサービスに通じることですが、ココを変えたいんだけどドコを触ったら良いのかわからない問題はめちゃくちゃに発生します。慣れがすべてですが、慣れても人間忘れるようにできてるので、更新を怠ると色んなことを忘れていきそうです。


精進あるのみです。


好き放題書きましたが、WIXは進化しているように感じます。

テンプレートの豊富さやかっこよさは勿論で、(元も子もないけど)慣れたら、

自分のオリジナルのデザインや構成が実現できるのではないかなと思います。


これから少しずつ関わったお仕事や作った品を投稿していこうと思います。



Comments


bottom of page