STUDIOメンバーが選ぶ、 特におすすめしたい8つのユーザー執筆記事まとめ

はじめに

リリースからもうすぐ4年、STUDIOは皆様に支えていただきここまで成長してきました。

その中で、皆様の実体験に基づく使い方やメリット、体験談などたくさんのことを発信いただいています。

そこで今回は、私たちSTUDIOチームのメンバーがおすすめするユーザー執筆の記事を、STUDIOを使う上で知っておきたいポイントとしてご紹介。

全8本、使い方からサイト制作の流れまで、この記事たちを読めばSTUDIOを使用したサイト制作に必要なことがあらかたわかります！

基礎知識

STUDIOの使い方 - 入門編｜はるかな | meln Inc.｜note

STUDIO Ambassadorでもあるデザイナー、はるかなさんによる、今まさに使い始めようとする人に向けた記事。

そもそもSTUDIOってなに？何ができるの！？という疑問に対して、メリット、デメリットや作例、困ったときに何をすれば良いのかなど、初学者がつまづきやすいポイントが、とてもわかりやすく解説されています。

STUDIO基礎

Let's Study STUDIO

記事で概要を学んだら、次は実際にSTUDIOを触りながら練習してみましょう。

STUDIO Ambassadorの岩下智さんが制作したLet's Study STUDIOは、実際にワークショップの資料として制作されたこともあり、STUDIOの基本であるボックスレイアウトの概念から、順を追って触りながら習得することができます。

そして何よりおすすめしたいポイントは、このサイト自体もSTUDIOを使用して作られているところ。つまり、STUDIOをマスターすればこのサイトを自分の手で作ることもできてしまいます！

今からSTUDIOを学ぶ方はもちろん、履修済みの方にも基礎を振り返るためにおすすめしたいサイトです。

デザインエディター

STUDIOによるWebサイト制作のコツ9選｜お客さんや社内の人が喜ぶ作り方・注意点 ｜caroa design blog

STUDIOでは気軽にサイトを制作することができます。

でもそれは、構造化が適切でなく、レスポンシブやSEO、アクセシビリティに配慮できていないサイトになってしまっているかもしれません。

STUDIO Partners のcaroa designさんが公開しているこちらの記事では、どうしたらより良い形にできるのかわからない！そんなあなたに向けて、サイト制作のコツが図解を織り交ぜながら詳細にまとめられています。

この９点を意識したサイトを制作できたとき、一つレベルアップしたと言えるでしょう。

CMS

STUDIOのCMS機能をつかってサイトをつくってみたので、手順をまとめました｜はるかな | meln Inc.｜note

STUDIOの大きな特徴でもあるCMS機能。この機能を使用してポートフォリオサイトを制作した際の記録記事。CMSの概念から、実際の実装手順が詳細にまとめられています。

この記事内ではるかなさんが制作しているサイトは、ユーザーの皆さまが活用できるSTUDIOのプロジェクトテンプレートしても公開されているので、記事を読みながら触ってみるのも良いかも。

一度CMSを触ってみて、挫折してしまった方にもおすすめしたい記事です。

アニメーション

STUDIOでノーコードでアニメーションを作る①（基本編）｜渡邊佑樹/株式会社iDA｜note

STUDIOではウェブサイトにアニメーションを追加し表現を拡張することができますが、時間や遅延、スケールなど設定可能な項目が多く、どこから触れたらいいか迷ってしまうこともあるでしょう。

そんなあなたはこの「STUDIOでノーコードでアニメーションを作る①（基本編）」を真似して練習してみませんか？作者のワタナベさんがデザイナーではない目線で書いた記事は、初学者でもとても理解しやすいものとなっています。

掲載している4つのアニメーションを作成することができたなら、STUDIOで可能な表現の基礎が身につくはずです。

SEO関連

STUDIOってSEOに弱い？STUDIOのSEO対策を解説！ ｜STUDIO制作・Web制作に関するお役立ち情報丨miroworks

「ノーコードで作ったサイトってSEO大丈夫なの？」 そんな漠然とした不安を分解し、徹底解説してくれる記事がこちら！

miroworksさん執筆のこちらの記事は、STUDIOで可能なSEO対策と自社サイトに施した結果が公開されている貴重な資料。

対応項目ごとに詳細な解説がなされているので、この記事を参考に自分のサイトを対応させると良いでしょう。

せっかく作ったサイトだからこそ、しっかりSEO対策を行なって多くの人に見ていただける状態を目指したいですね！

公開前チェック

STUDIOでのサイト公開前の注意事項。チェックリストも公開！

デザインして、CMS設定して、SEO設定して、さあ公開！と行きたいところですがもう一つ大切な作業が残っています。それはサイトを適切に作成できているか確認することです。

そんな時にはこちらの記事「STUDIOでのサイト公開前の注意事項。チェックリストも公開！」で再確認。

STUDIO 唯一のGold Partnerであるgazさんの実践ノウハウがふんだんに盛り込まれた記事です。

こちらの記事ではチェックリストも配布されていますので、自分のプロジェクトで確認する際に活用することも可能。心強い味方です。

応用技術

DESIGN RECIPE | デザインが学べる、真似してできるレシピまとめ

STUDIOを使ってこんな表現を実現してみたい！そんなあなたにはるかなさんが公開しているこちらのサイト「DESIGN RECIPE」

総勢20種類のボタンスタイルの作り方を掲載。レイヤーやスタイルなど設定が必要な項目が網羅されているので、再現することで実装知識が身につくこと間違いなしのサイトです！

最後に

いかがだったでしょうか？

今回は制作工程ごとに計8記事をご紹介しましたが、他にもおすすめしたい記事は他にもたくさん存在します。

皆さんのおすすめ記事も、ぜひ Twitterのハッシュタグ #STUDIOファンブログ にてご紹介ください！