世界一周を夢見た男のre: blog

イメージ
イメージ

WEBをデザインした事がないデザイナーが初めてSTUDIOでホームページを作ってみました。[前編]

ホームページを作ってみよう

※webデザインをした事が無い人が書いているので、よく分からない事を言っているかもしれませんがご了承ください。


後編はこちら

コーディング修行僧の憂鬱

こんにちは、長引くコロナのおかげで2年ほどテレワークをしています。ちょっと時間があいた時にWebの勉強をしてみようと思って、家にあるwordpressやらcssの本を読んだりしながら、一回だけコーディング(プログラミング言語でページを作っていく)をした事があります。なかなか大変でした。その時はデザインはもう出来ている状態で、コーディングだけ担当したのですが、htmlで書きつつ、cssで飾り付けて、javascriptでなんか動かしたり、wordpressをちょっとイジるためにphpを触ったり、もう大変。本業は印刷媒体のデザイナーなのでフォトショップやらイラストレーターは使うのですが、もうデザインは出来ているので素材を書き出すために使うだけ。情報システム科卒業なのでプログラミング自体はした事があるけれど、htmlですら本で読んで覚えた程度です。完成はしたけれど、とてもじゃないけど成立していない。ニュージーランドから南米に飛行機で渡って、空港を一歩出た瞬間スペイン語しか通じなくなって、町中で遭難しかけた時ぐらい、何も通じませんでした。

ネットサーファー溺れる

webのデザインを勉強しようにも、普段何気に見ているページで動いているあれやこれが、何で動いているのか分からないし、難易度がわからない。ちょっとした動的な処理を実現するのにどの言語を勉強するのか?コーディングは外注すれば良いのかもしれないけれど、難易度が分からないと見積もりも出来ないし、何から勉強したら良いのか。おまけに検索エンジン対策でSEOだとか、デザイン以外の設定や決まり事も多いし遭難していました。

そんな時にふと、ノーコード(プログラムしなくていい)でwebを作れるサービスで、最近よく聞く「STUDIO」って言うのがあるらしいよと教えてもらいました。wixは聞いた事があるけれど、STUDIOは初めて聞いたのでちょっと調べてみたら、5日で習得しながらページを作りましたとか。スピーディーに公開まで持って行けて、無料プランでもブログやらお問い合わせやら、wordpressみたいな動的なページが作れるらしい。コードを書かなくて良い、ていうかほとんど書けない。なんか行けそうなのでちょっとやってみようかな?

マーヤーの動画を視聴する

と言うわけで説明動画が大量にアップされていたのでとりあえず主要な所を視聴して、行けそうなのでそのままデザイン無しで進める事に。

動画を視聴した後で感じた事ですが、コードを書かないとは言いつつも、やっている事はコードを視覚的にいじっているイメージ?と言うか、普通ならコードを書いて実現している設定や数値、レイアウトを全部ブラウザ上のアプリで素材をドラッグしたり、数字だけ入力したりで作って行くので、コーディングを知っていた方が理解が早いと思います。でも、僕のようにwebのデザインをまったくした事が無い人でも触っていたらなんとかなりそう。とりあえずSTUDIOのYouTubeにアップされている動画を見ましょう。そして

このあたりまで見た時に一体「和栗 麻綾」って何ものなんだと気になってくるはずです。そしてインスタやらツィッターを探し初めて脱線すると思います。この動画の出だしで「宿題はやってきましたか?(かわいい)」と言われて我に帰ります。でもこの辺まで見るとマーヤーが見たいのか、STUDIOの使い方を見たいのかが、アヤフヤになって来るので、とりあえず制作に取り掛かります。

まずはロゴだ

いままでアドビCCのイラレとフォトショだけ契約していたのですが、長引くコロナで会社に行かないうちに、会社のMacが時代遅れになってきて、ついに買い換える事に。それに伴いCCも全部入りバージョンになったので、ドリームウィーバーかXDを触ってみようかなと思っていたのですが、STUDIOだったらそれすら不要で、いきなり作れる気がしたのでとりあえずロゴから始めます。

いや、名前がまだ無い

とりあえず今回、blogの機能を入れたかったので何かのブログを書こうと思いつつ、最近やっている事と言ったら渓流釣りくらい。でも魚の写真ばっかりだと気持ち悪いかもしれないし、写真は旅行に行った時のが大量にあるしそれを入れる事にして、あと趣味と言えば音楽だった時もあるしロッククライミングだった時もある。

'n'

Rock-climbing Rock’n’rollで、岩魚の事をRock-fish、旅行の事をRock-tourにして「Rock」ブログだとなんか意味が違うし、Rock and rollの真ん中の’n’をロゴにする事にしました。’n’これはandの前後を省略して’n’っていう事なんですかね?読み方は「ン」なのか?ちなみに&のロゴはあるけれど’n’これは無さそう。なんか顔みたいだしこれでオッケー!名前とロゴさえ決まればほぼ完成も同然で、Rock-の4つをページにわけてそれぞれに入れたい機能を盛り込んでいきます。デザインよりも、何が出来るかと操作を覚えるために作成していくので、何も省きません。

つづく。

入れたいものリスト

  • 上のナビを固定したい。
  • ツイッター、ユーチューブ、インスタを入れたい。
  • GIFアニメでなんか入れたい
  • フォントを一文字ずつ変えてロゴっぽいものを入れてみたい(文字を画像にしたくない)
  • カルーセルを入れたい。
  • 角丸を色々変えれるらしいので変えたい。
  • 下から何かふわっと出したい。
  • ‘n’←これが顔みたいだから他に応用したい。
  • オブジェクトの位置を固定したい。
  • 地図を入れてみたい。
  • でかい文字でフォントを入れて改行を制御したい。
  • 動画を背景にしたい。
  • ‘n’←これを転がして登場させたい。
  • レスポンシブしてみたい。
  • etc…..
他の記事

calender

2022年7月
 123
45678910
11121314151617
18192021222324
25262728293031

archive

back number