超初心者が「コードを書かずに、Webサイト制作を完結」してみて感じたこと

「ALIS紅白大運動会」が終わってから、ALISに記事を書く時間をプログラミングの勉強に充てることにしてから、20日ほどが経ちました。

その後、Progateの有料会員に登録してPythonの学習コースを進めながら、学んだことをGoogle Colaboratoryに打ち込みながら頭に入れていく…という作業を続けています。

勉強を始めて20日の成果はというと、以前はちんぷんかんぷんだったコードの意味が少しずつわかるようになってきたことぐらいでしょうか。

たとえば、ゆーこ先生のプログラミング学習記録の記事に書いてあるコードの意味が理解できるようになってきました。

自分のなかではこれだけでも「成長してる！」と実感できることなので、まあ少しずつですが前には進んでいるのかなと思います。

（今までは、ALISに上がっているプログラミング関連の記事、まったく意味がわかりませんでしたからね…）

そんなプログラミング超初心者がPythonから学び始めたのは機械学習に興味があるからというシンプルな理由なのですが、もずくさんの記事を読んだりするといろいろな言語に興味が湧いてきますね。

まあ、出張が入ったりそのほかのことが忙しくなったりするとProgateに入れなかったりするのですが…

ただ、手を動かしていない時もプログラミングに関する記事を読んだりして、とりあえず毎日、何かしらプログラミングに関わる時間を作るようにはしています。

そんななか、はるか先生がALISに書いた記事を読みました。

「プログラムを書かなくてもプロダクトが作れる」⁉︎

プログラミングの勉強を始めた今だからこそ、かえって惹かれるフレーズでした。

いわゆるNo-codeについて書かれた記事で、いろいろなプラットフォームやサイトの情報へのリンクも貼られています。

リンク先の情報もひととおり目を通して、「面白そうだなぁ」と感じたので、少し触ってみようかなと思い、以下のプラットフォームに登録してみました。

「STUDIO」です！

この記事のタイトルに引用したように、「コードを書かずに、Webサイト制作を完結」することができるプラットフォームということで、はるか先生の記事にリンクが貼られていた以下のページで紹介されていました。

ALISでもテクノロジーの掛け算（TRAREVO)さんが紹介記事を書かれています。

上に挙げたはるか先生の記事へのコメントに、こすもすさんがSTUDIOは「コードは書かなくてもいいものの、簡単ではないなと言う印象」と書かれていたので、少し不安はあったのですが…

まあ、とりあえず触ってみないとわからないということで、超初心者が「Webサイト制作を完結」することができるのかどうか試してみました！

それで、まず結果から書くと…

「コードを書かずに、Webサイト制作を完結」できました！

とりあえず、こんな感じのサイトができました。

おぉ、サイト名や説明文、サムネイルが登録したとおりにちゃんと表示されてる！

そうです、これだけで感動するほどの超初心者なんです。

STUDIOの使い方については、公式サイトにチュートリアル記事や動画が掲載されていますし、ヘルプも充実していますので、イメージは湧きやすいと思います。

また、無料でもいわゆる「デザインツール」と呼ばれている、サイト作成のための機能はひととおり使えるということだったので、まずはメールアドレスで登録してサイトを作ってみることにしました。

とりあえず、サイトのコンセプトとしては…

ALISやnoteに書いている記事へのランディングページを作る

ということをイメージして作っていくことにしました。

で、実際に使うことができる機能をできるだけ触ってみるために、あらかじめ用意されているテンプレートは使わずに、イチから作ってみることにしました。

まずはどんな機能があるのかを、チュートリアルの内容を確認しながらただただ触り続ける時間が３〜４時間ほど続きました。

それから、ヘッダーやトップページのデザイン、ページの構成などなどを少しずつ考えながら作っていきました。

まあ、超初心者ですから、あらゆることにつまづきながら作業を進めていったわけで、結局、サイトの公開までにかかった作業時間は30時間ぐらいだったのではないでしょうか。

特に、なかなか上手くいかなかったポイントは…

・PC・タブレット・スマホそれぞれのデザインの調整が難しい

・ボックスの配置が思ったとおりにいかない

といったところでしょうか。

PC・タブレット・スマホそれぞれのデザインの調整が難しい

ひとつめについては、いわゆる「レスポンシブデザイン」の機能がSTUDIOでは採用されているので、基本的にはデバイスに最適化されたサイト構成になるようになっているんです。

ただ、本当にデバイスごとに最適化されたデザインで表示させるためには、デザインツールを駆使した調整が必要です。

もちろん、いろんなルールを踏まえて調整すればデバイスに合わせた綺麗なデザインで表示させられるのですが、まだ完璧には理解できないままになっています。

それでも、チュートリアルやヘルプを見れば、ある程度それっぽい感じで調整できるのは良いなと思いました。

ボックスの配置が思ったとおりにいかない

また、ふたつめのポイントについては、以下のSTUDIOの公式サイトにあるように、STUDIOではサイトを構成する基本的なシステムとして「ボックスモデル」という形が採用されています。

文字や写真、動画などはすべてこの「ボックス」という要素に置き換えられて、これを並べたり重ねたりしていくことでサイトを構築していきます（という理解でいいのかな…？）

で、このボックス、画面上に配置できる場所が決まっているんですね。

それらを余白を設定（マージンとパディング）しながら、配置場所の調整をしていくんですが、これがなかなか難しく感じました。

たとえばこれは、プレゼンテーションソフトで各要素を自由に配置するような形でサイトを作ることは難しい…ということなんですね。

これ、たぶん、仕方がないことなんでしょうけれど…なかなかハードルが高いなぁと思いました。

同時に、これは面白いなぁと思った機能もあり、今回のサイトにも組み込むことができました。

それは、RSS連携機能を使って、noteの記事をサイトで表示させるという機能です。

これを使って、noteの記事へのリンクがずらっと並んだページを簡単に作成することができました。

チュートリアルページの方法をそのまま実行しただけですが、それでも「自分でページを作った感」があって、なかなかお気に入りです。

同じように、ALISの記事も取り込めたら良かったのですが、それはまだまだ叶わず…

とりあえずALISについては、検索がしやすいALISCHOOLのマイページにリンクさせています。

ALISの記事を自分のサイトに引っ張ってくるためにはAPIを使ったりすればいいんだろうなぁ…と、ALISの方々のプログラミング記事を読みながら思いましたが、それはまだこれから勉強していかないといけないところですね。

ということをいろいろ考えながら、とりあえずそれっぽいサイトができたのですが、あらためてSTUDIOのサイト説明文を見てみると…

STUDIOは、Webサイトのデザイン・公開・運用までコーディングなしで完結できる、次世代のデザインツール

うん…

「次世代のデザインツール」

なんですよね、STUDIOって。

デザインツールなんですよ、デザインツール。

つまり、デザインセンスがあってこそのツールということなので、デザインセンスがないと辛い感じの出来になっちゃうんですよね…

…触ってみるツール、間違えたかな。

うん、デザインセンス、無いしねぇ…

ただ、実際にゼロからサイト作成のプラットフォームを使ってみて…

サイト作成をもっと自由な形でやってみたい！

そして実際に運用してみて、運用の効果を確かめてみたい！

と思うようになりました。

今回作ってみたサイトをもっと発展させたいということもありますが、自分の本職のほうでもいろいろとやってみたいことがあるので、そちらに向けてもう少ししっかりとやってみたいという気持ちが湧いてきました。

それで、これから…

WordPressでサイトを作る！

Pythonの学習と並行してHTMLとCSSを勉強する！

ということで、コツコツやっていきながら、進捗があればまた記事にしたいと思います！