iLandの公式サイトをリニューアルしました。
(5年ぶり4代目)



新iLandサイトのURLはこちらです。
https://iland.themedia.jp

新iLandサイトトップページスクリーンショット


相互リンク・ブックマーク・ご紹介していただいている方、僕がこれまでのURLが載った名刺等をお渡しさせていただいた方、大変申し訳ございません。
新しいサイトURLへの書き換え・ご認識をよろしくお願いいたします。



お仕事道具ギャラリー


新サイトの目玉の1つがこちら。作りたいと思っていたお仕事道具ご紹介ページです。メーカーの宣材写真ではなく全部自分著作の写真です。面倒臭かったです(物撮りセット広げるのが面倒臭い)




以後、新サイトをよろしくお願いいたします。







以下、サイト作り奮闘の自己満話。

経緯・理由


iLandサイト1代目・2代目は、完全にローカルで自分の(古い)技術で組み立てたサイトデザインをまっさらなサーバーにアップしていたスタイル。
それが書き換え・更新が面倒で、前回の3代目は、当TundieBlogで使い慣れたlivedoor Blogを、記事日付け部分などを消去したりブログらしさを消して、独自の改造をして作りました。(パソコンで見た際には)なかなか理想的な作りができ、ドメインも「.blog.jp」とシンプルで悪くなかったです。

【参照記事】前iLandサイト開設記事 (2015年1月21日)


しかしlivedoor Blogの特性として、「スマホで見ると、デザインの変わる『スマホ版』が表示される」という事がありました。パソコンで見る際のパソコン版としては、記事のタイトルや日付けのヘッド部分を改造で消し、記事数本をサイトの「ページ」として利用していましたが、スマホ版のカスタマイズは自由が少なく、記事パーツの記事タイトル・日付けを消す事ができません。そこでスマホ表示時には、記事のパーツを全くなしにして、別のフリーパーツを載せて「パソコン版をご覧下さい」との誘導メッセージを載せたり、iLand事務所(自宅)にご訪問して下さる方への「事務所へのアクセス」だけを載せてました。

この前サイト作成の頃から当然スマホは普及していましたが、僕自身がパソコン派で「パソコンで観てよ」という意識がありました(笑) しかし、時代は更にスマホ強になっていき、スマホで見られないとなと思ってました。



2年前から新サイト検討と停滞


まず前提なのですが、僕はサイトでの集客を意識してません。そんなにバンバン何かを買ってもらう仕事じゃないし。皆さんが僕を確認したい時にプロフィール・やってる事を確認できるサイトが作れたらいいかという感じ。
なのでプロにお願いするかとか独自ドメインについても悩みどころですが、とりあえず自作で、無料のままで行こうかなと。無料にあたり、URLにはそのサイトサービスのドメインが付いちゃうのですが、付くなら付くであんま有名じゃないサービス名や、iLandの仕事と違和感のないワードを選びたかったです。

確認してみると2年も前にリニューアル検討して実行し始めていました。あちこちのサービスでアカウントを作っては試し。主に下記を検討。ちょっとずつ各所試しつつも、忙しさもあり停まってましたが、最近また取り掛かる事ができ、やっとほぼほぼ完成でこのお披露目へとなりました。

各所クセ

  • Jimdo … テンプレがダサい。新しい風が吹いてない感じ。早々になし
  • Adobe Portfolio … Adobe CCに加入していると無料で利用できる。個人自己紹介という感じのコンセプト。独特。ドメインは「.myportfolio.com」と悪くない。が、サイト内ボタンでトップページに戻ると、URL末尾を「.com」にしたいのに必ず「.com/index」がつき回避できない
  • Wix.com … 1番有名ですね。最もウェブデザイン知識のない素人でも色々できるシステムが仕上がっている。初めに選ばないといけないテンプレは、今どきの大胆かつオシャレサイトのテンプレばかり。好きで納得してそのデザインにするのでないのなら、自分らしさの根拠がない大胆さをまとう感がある。アカウントを作った初期に選んだテンプレをどうも後から変更できないっぽい。無料時URLが「https://xxx.wixsite.com/xxx」と、Wix.comをはっきり出した文字を中間に挟む事になり、無料URLは個人的に低評価
  • Ameba Ownd検討を重ねたのち、こちらでやっていく事に決定!


決めたAmeba Owndでも大グセ


ブログ市場で大成功したアメーバが作ったウェブサイト制作サービス。テンプレ等今どきのセンスのオシャレな見た目で表面を覆っていますが、やれる事が少なく、多々開発不足を感じさせます。
「有名人もAmeba Owndでサイトを作っている!」という事で「導入事例」がありますが、どこも契約で仕方なくAmeba Owndでもサイトを作ったという感じで、本命サイトはほかにあってやっつけで作っている例ばかり…。こういうもろもろで、いつか突然サービス自体終了させないかと心配になる程です

ドメインは「.themedia.jp」(the media)と、iLandの職業柄かなり上出来です。

閲覧するディスプレイ横幅800px以下になるとスマホ表示モードに切り替わるリキッドデザイン。これを求めてこのiLandサイトリニューアルとなった訳ですが。

例えば、パソコンモードで横1行に2つ・3つ・4つ並べている画像が、スマホモードで1コずつ縦に並んでいく事になります。これがブロック(パーツ)「画像」ならまだマシなんですが、ブロック「リンク」がヒドい。ブロック「リンク」はURLを書き入れるだけで、パソコンモードではそのリンク先サイトのタイトル等テキストちょっととそのサイトのアイコンが載る横長の長方形となるのですが、スマホモードではページ横幅一杯、そして横幅よりも高さのある画面を埋める四角となり、その四角の中に目一杯、本来大きくして表示するものではないリンク先サイトのアイコンが画像粗々で巨大な正方形となって表示されるのです

なので、ブロック「画像」もその画像自体にクリックするとジャンプできるリンクを設定する事ができるので、オリジナルのボタン画像を作り、その画像内にリンク先の軽い説明も入れ、「バナー広告」のようにしてオリジナル画像ボタンを配置する事にしたのですが…

リンクを設定してない画像はクリックすると拡大され、スライドショーになってそのページに配置した全画像をパラパラ見れるようになります。リンクを設定した画像自体はクリックしても拡大せずにリンク先へジャンプする事になるのですが、同ページに「リンク設定した画像(オリジナル画像ボタン)」と「リンク設定してない画像」を配置すると、「リンク設定してない画像」をクリックし拡大しスライドショー化した時に、ボタン画像も一緒にスライドショーに出てきてしまうのです
(追記: ページをまたいで画像がスライドショーにでてきたり、ルールが解りません)

…とこれはダメな所のほんの一例で、色々とダメです
改良してほしいのですが、開発が停まってそうな雰囲気です。

今後もクセと向き合いちょっとずつ修正していこうと思います。