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

イメージ
イメージ

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

前編はこちら

レイアウトしてみる

まずレイアウトしようとして何かオブジェクトを置くと、四隅と上下左右の真ん中、それとページかボックスのど真ん中にはたぶん置けると思います。それ以外の位置に置く時は、どこかに置いてからそのオブジェクトのマージンに数値を入れて、ボックスの辺からの位置を調整していきます。辺から十分にスペースがあると多分位置は変わりません。マージンと似ている設定でパディングというのがあって、紙媒体の設定では用語として聞いたことが無いけれど、こちらはボックスの中身に対しての余白を設定出来るので、この設定を調整してでもレイアウトが出来ます。

そして次のオブジェクトを同じボックスやページに置こうとすると、自由な位置には置けなくなっている事に気が付きます。

このあたりで、コーディングを知っていると分かるのですが、ひとつオブジェクトを置くと、その位置によってページやボックスにセンター揃えとか、左揃え、下揃えの設定が決まるんですね。なので、次のオブジェクトはその設定によって上下にしか置けないとか、左右にしかおけないとかが決まってきます。それとは別にボックスの中でオブジェクトの均等配置とかも設定出来て、なんか色々いじって理解していきます。

初めてSTUDIOでホームページを作ってみました

なんとなく上の図を作ってみましたが、これで言うと真ん中にオブジェクトがある状態で左隅にオブジェクトは置けない(中央揃え設定になるから)ので、置きたかったらボックスを増設して、その中で左隅に置いたりするわけです。その上で、レイヤーとか重ね順を設定して上下関係を決める事も出来ます。コーディングでやると大変なのに一瞬で楽。

この辺は相対位置というレイアウトの仕方でやっているのですが、固定位置にするとページの辺から絶対にこの位置に固定!というレイアウトが出来て、ページのサイズを変えようがスクロールしようが同じ場所に置けるので、ナビゲーションに使ったりするようです。あとはサイズの単位が色々あるのでそれをググったりすると、大体レイアウトは出来るようになるはずです。なので、印刷媒体のデザイナーでも見た目だけは作れると思います。楽勝。

レスポンシブ対応にイライラ

が、ページの横幅を変えるとレイアウトがズレたりします。もっと変えたり、他の携帯で見ると全然違う事になってイライラします。ボックスの単位をページの50%とか、Autoで勝手に幅に合わせるとか、携帯で見る時はこの設定にするとか、そう言う設定をしていくのがややこしい。A1縦でポスターを作っていたのに、ごめん、A4でした、しかも横。みたいな時に、どうレイアウトやサイズを変えていくかが紙媒体とは違って慣れないと大変。しかも、初期設定なのか分からないけれど、STUDIOでやっているとページサイズを変えたら急にマージンが変わったり?パソコンサイズの設定を変えるとタブレットサイズの設定も変わったり?変わるだろうと思ってやってみたら変わらなかったり?クセがあるので色々やってみますが、コーディングを覚えるよりは、はるかに楽です。

ブログは全部のページで設定が一緒

初めてSTUDIOでホームページを作ってみました

レイアウト以外の設定で、ボタンを押したらリンクに飛ぶとか、スクロールしたら動くとか、何か外部から埋め込むとか、紙媒体ではしない、動きのある設定は調べるしか無いのですが、調べたら普通に出てくるので問題ないと思います。ほんとレイアウトが大変。今回は事前にデザインを作成せずに、色々弄りながら作って行ったので、更に無駄な時間がかかりました。最初からcmではなくピクセルとポイント、RGBでカンプを作った方が早かったと思います。そしてブログではh1、h2、ボールドなどのタイトルや強調に対する設定があるのですが、これは設定すると他のブログのページにも反映されて、多分変えられません(有料なら変えられる?)。このページのさっきの説明イラストが大きいから50%にしようと思って設定すると、全部のページの画像が50%になるし、ここで行間を変えると全部のブログページで設定が変わります。恐ろしい。このあたりは多分コーディングの知識があるとCSSが全部一緒で反映されるんだなと分かるのですが、ちょっとイライラするぐらいで別に知らなくてもなんとかなると思います。なので、Webデザインをした事がなくてもなんとなく作れる!作れた!イライラにも慣れる!

三部作にしようとしたけれど

ここで詳しく説明するよりもマーヤの動画を見れば分かるのと、ボックスの中でのレイアウトとマージンパディングさえ分かればなんとかなると思うので、前後編で終了。紙媒体のデザイナーでもこれだけ分かればなんとかなります。そして

初めてSTUDIOでホームページを作ってみました

上のNAVIは固定して透かしてみたり、サイズに合わせて魚の大きさが変わったり、

初めてノーコードデザインでブログを作ってみました

スクロールしたら記事が出たり、角丸が角によって違ったり(使い所がわかりませんでした)、タイトルを他のオブジェクトに乗せてみたり(一文字ずつフォントを変えようとしたらあんまりだったので、タガログ語等でなんとなく読める様になった?ちなみにFISH BLOGと書いてあるつもりです)

初めてSTUDIOでホームページを作ってみました

永遠に地図のサイズが伸びたり、イメージっぽい文字の入れ方をしてみたり

初めてSTUDIOでホームページを作ってみました

このページはYouTubeのリストを見てほしいので説明もなく、アイコンを入れて小さめに表示されるようにしたり

初めてSTUDIOでホームページを作ってみました

ムービーを入れたり

初めてSTUDIOでホームページを作ってみました

ロゴを転がしたり

初めてSTUDIOでホームページを作ってみました

色々埋め込んだり、カルーセルを設定して、固定位置に広告っぽいのをつけてみたりしている間に、操作が出来るようになりました。黄色の背景とか頭おかしいだろとか、文字が読めないとか、なんで魚動いてるの?レイアウト崩れてるのか意図的なのか微妙とか色々あるけれど、これはこれで置いておこうかな?

LPを作ってみよう

操作が出来るようになったので、一旦イラレかXDでデザインを作り直してリニューアルしようと思っていたのですが、とりあえず?トップページを改良してLPっぽくしようと思っています。あと、魚ブログの内容が乏しいので釣りに行きます。他の記事は旅行とかライブとかしないと記事が書けないと思うので、とりあえず釣り。また何か書きます。

他の記事

calender

2022年8月
1234567
891011121314
15161718192021
22232425262728
293031  

archive

back number