.../articles/

デザイナーが思うLP制作でSTUDIOを使う5つのメリット

HTMLやCSS, JSでマークアップするのではなく、ウェブサービス上のGUIでウェブサイトをつくることができる"STUDIO"というサービスを触ってみたので感想をまとめました。マークアップまで担当するデザイナー、という目線で面白かった部分にフォーカスしています。

STUDIOについてなにも知らない!という方はこちらの公式から。
この手の似たサービスには、WixSquarespaceなどがありますね。その中でも国産の分かりやすいサービスとして話題になっています。

僕の中では、コードを書かずにウェブサイトを作れる = コードの中身について気にしない、というのが今までのビルダーの考え方だったと思っていて、吐き出されるHTMLについては目をつぶるもの、という認識でした。要素の位置とか配置はposition:absoluteが基本、みたいな。(そもそもビルダーあんまり触らないから古い認識かもしれない)

ただ、実際に触ってみるとマークアップする感覚に近く、HTMLの要素を意識しながら作ることができるのが良いなと認識を改めました。

なにを作ったか

自社で作っているサービスのLPを作りました。

農作物向けクラウド受発注管理アプリ | qrop
https://qrop.app/
全体像はこんな感じ。

農作物の受発注をかんたんにできるウェブサービスです。
農家の方はお試しください👨‍🌾

このLPを作ったときに感じた推しポイントを書いていこうと思います。

推しポイント

  • 要素の配置方法が選べる
  • レスポンシブ対応の確認がしやすい
  • HTML要素の構造が可視化される
  • 画像、フォントのアセット類が豊富に使える
  • SEO対応などのダッシュボードが使いやすい

要素の配置方法が選べる

「01」の数字部分は絶対位置、テキストは相対位置で配置しています。
要素の配置方法が相対か絶対位置か選ぶことができます。なんでもかんでもposition:absoluteだとレスポンシブに対応することを考えると困っちゃうんですよね。ブラウザ幅の成り行きで変化するようにしたいことの方が多く、相対位置だとコードとしてどうなっているかもつかみやすく分かりやすいです。

レスポンシブ対応の確認がしやすい


Chromeのデベロッパーツール的な画面サイズの変更UIがとても使いやすいです。
タブレット、スマートフォンのサイズごとに作成したデザインが反映されるというシステムも直感的でわかりやすく、配置の仕方もflexのような考え方なので、崩れにくい構造にすることができるのも良いと思いました。デバイスごとに要素の非表示ができるのも地味に助かります。

HTML要素の構造が可視化される


ブロックを入れ子にしながら作っていくとどうしても構造が複雑になりすぎるのですが、レイヤー表示が右側についているので、構造を確認しながらつくることができます。idをふることもできるので、見た目にも分かりやすいですね。

画像、フォントのアセット類が豊富に使える


Unsplashの高品質な画像、Typesquareによるモリサワフォントなど、使える素材が多いのはすごく嬉しい機能です。とくにモリサワフォント!これあるだけでテンションめっちゃ上がります。

SEO設定などのダッシュボードが使いやすい


このプレビューに妙に感動してしまいました。metaタグ関連は本番化しないと可視化されないことが多いので、なんとなく後回しにしてしまいがちですが、こう見せられるときちんと書かなきゃな、という気持ちになりますね。


オンボーディングとか公開の導線とか編集のしやすさとか分かりやすい推しポイントはすでにいろいろな方がnoteなりなんなりで書いているので、個人的に良いな!と思ったポイントを紹介しました。

ネガティブマージン使えたり、レイヤーにidではない編集用の名前付けられたりするともっといろんな表現ができると思いました。
CMS機能も開発中みたいなので期待しています。

作ってみて思ったこととして、マークアップのスキルがなくてもできるように作られていますが、知識があるとよりSTUDIOの使い方の理解が進むのではないかなと思いました。ブロックを積み、内包する要素の挙動を定める考え方は基本的にはHTMLを組むのと同じことだからです。
STUDIOでデザインを作っているうちにHTMLやCSSについて理解できるなんてことも、もしかしたらあるかもしれません。

1から作るだけではなくて、目的に応じて作り方も柔軟に変えていきたいです。
nocode系のサービスがもっと流行って、いろいろな層の人が良質なコンテンツ(かつ良いデザイン)を作れる時代になると良いなと思いました。

.../articles/

Articles

記事

AWS AmplifyにmonorepoのNext.js(App Router)をデプロイする

AWS AmplifyにmonorepoのNext.js(App Router)をデプロイする

monorepo管理しているNext.jsをAmplifyにデプロイしようとした際にいくつか躓く内容があったのでまとめておきます。

リモートワーク・オンライン会議でも、スムーズに制作を進めるために大切なこと[資料編]

リモートワーク・オンライン会議でも、スムーズに制作を進めるために大切なこと[資料編]

コロナ禍の影響により、リモートワークの導入をおこなっている制作会社も多く、実際に弊社でも導入しています。

売れるECサイトデザインを作るために。参考にしたいおしゃれな事例の探し方。

売れるECサイトデザインを作るために。参考にしたいおしゃれな事例の探し方。

売れるECサイトのデザインは、「この形式」という決まりはありません。ECサイトで売り上げを上げるなら、しっかりとしたコンセプトと、コンセプトを決定するまでのリサーチが必要です。

制作会社の考える、業務効率化ツールのおすすめ。個人でも使いやすいサービスなど。

制作会社の考える、業務効率化ツールのおすすめ。個人でも使いやすいサービスなど。

新型コロナウイルス感染拡大の影響で、リモートワークが主流になり、弊社でも週のほとんどは各自宅で作業をしています。

Figmaでデザインのコミット履歴を残せるプラグイン【Thought Recorder】をリリースしました

Figmaでデザインのコミット履歴を残せるプラグイン【Thought Recorder】をリリースしました

Figmaを利用するWebデザイナーの助けになれると嬉しいです。使い方は本記事をご覧ください。

ECの構築方法、おすすめのECサービス。

ECの構築方法、おすすめのECサービス。

ファッションや家電、スーパーの買い物でさえもECサイトを利用することが当たり前になりました。加えて新型コロナウイルスの影響もあり、弊社にも「どんなプラットフォームを利用したら良いか」「どれくらいコストがかかるのか」などECに関するさまざまなご相談を頂きます。

FastAPIのスキーマクラスをOpenAPIから生成する方法

FastAPIのスキーマクラスをOpenAPIから生成する方法

PythonでAPIを構築する要件があり、フレームワークに比較的モダンなFastAPIを採用しました。FastAPIはバックエンドの開発を行えば自動でOepnApi定義を生成する機能が備わっていますが、今回はこれを使わず、事前に用意したOepnApi定義からFastAPIで利用するスキーマクラスを生成する方法を紹介します。

Laravel 日本一解りやすい全文検索のマイグレーション記載方法解説

Laravel 日本一解りやすい全文検索のマイグレーション記載方法解説

Laravel + MySQLで全文検索を実装する

GiFT1号目新卒デザイナーの2021年振り返り

GiFT1号目新卒デザイナーの2021年振り返り

いつの間に、年末ですね。入社してもう、9ヶ月も立っていたようです。2021年の振り返りを記事にしました。

TimesclaeDBのデータ圧縮に関して

TimesclaeDBのデータ圧縮に関して

TimescaleDBはデータベース内の一部のテーブルを時系列データとして扱えるPostgreSQLの拡張です。PostgreSQLの機能拡張なので非常に手軽に導入できます。今回はこのTimesaceDBの圧縮について調べたので備忘録として書き綴りました。

すべての記事

お問い合わせ