• Web運用

ノーコードツール活用で制作工数を約40%削減&サステナブルWebデザインを実現!製作陣が振り返る「年末のご挨拶サイト2024」制作裏話

メンバーズでは、VISION2030として「日本中のクリエイターの力で、気候変動・人口減少を中心とした社会課題解決へ貢献し、持続可能社会への変革をリードする」というビジョンを掲げています。そこで、デジタルクリエイター集団だからこそできるCO2削減の取り組みの1つとして、2020年より紙の年賀状を廃止し、年末のご挨拶をデジタルに移行しました。

今年で5回目となる「年末のご挨拶サイト」(以下、年末挨拶サイト)では、ユーザーの使いやすさと環境への配慮を考えた「サステナブルWebデザイン」の考えに基づく技術表現を昨年に続きおこなうことでCO2削減に取り組むとともに、今年は新たに「ノーコードツールを活用した次世代の高度なWeb制作」にチャレンジしました。今回はWeb制作の裏話やポイントについて制作メンバーからお届けできればと思います。

目次

Studioを用いたノーコード制作で、制作工数を約40%削減!

今年の年末挨拶サイトは、Studioを利用してコーディングせずにサイト制作をおこないました。ここからはサイト制作を通じて感じたStudioの魅力と制作のポイントをお伝えします。

Studioとは

Studio(スタジオ)」とは、表現力・直感性の高い、日本生まれのノーコードWeb制作プラットフォームです。

今年の年末挨拶サイトは、サイトを見てくださるすべての方々に、以下の点をシンプルにわかりやすく伝えることを重視したサイトという方向性で制作しました。
        • 一年間お世話になったという感謝の気持ち

        • メンバーズはお客さまのDXの現場を伴走支援することで社会の変革を目指す
例年のサイトは動きやギミックにかなりこだわっていました。ですが、今年はシンプルなサイトを目指し、最近、導入することも増えているStudioでのノーコード制作との相性がいいのではと思い、Studioを利用することを決めました。

Studio活用のメリットと成果

ここからはStudioを活用して非常に良かったポイントをご紹介します。

圧倒的な制作スピードとミニマムな制作体制
印象的だったのは、制作スピードの速さです。従来のWeb制作と比較しても、迅速に制作が進みました。その理由は以下の4点です。
        • コーディングを一切せずに直感的なUI操作のみでサイト制作が可能
        • コーダーをアサインしなくても、ディレクターとデザイナーのみでサイト制作が可能なため、デザイナーとコーダー間でのコミュニケーションが発生しない
        • デザイナーが直接作るため、デザイナーとコーダー間の認識齟齬による修正が発生しない
        • 細かいテキストの修正や画像の差し替えなど、軽微な修正であればディレクターでも対応可能なため、修正を依頼して確認する手間がなくなる
結果として、制作工数を約40%削減し、その分をチームメンバーでのサイトのプランニングやデザインのブラッシュアップに充てることができました。
 
studioの操作画面直感的なデザインエディタで専門的な知識がなくてもサイト修正が可能

ノーコードツールとは思えないデザインの自由度の高さ
制作スピードの次に驚いたのが、デザインの自由度の高さです。個人的にノーコードツールは、ある程度決められたテンプレートのなかから制作する必要があり、デザインに制限が出てしまうのではないかというイメージがありました。

しかしStudioでは、一からレイアウト作成が可能で、利用可能なフォントは7,600種類以上、基本的なアニメーションも手軽に実装できるなど、デザインの自由度がかなり高く、制作をスムーズに進めることができ、デザインの自由度を活かして、年末挨拶サイトで表現したかった「DXの現場に伴走するメンバーズの先進性と温かみ」を表現することができました。

今回の年末挨拶サイトのようなシンプルなLPやコーポレートサイト、メディアサイトなどとの相性が非常に良いと感じました。
ただし、ログイン機能やランキング機能などシステム要件が複雑な場合は難しいかもしれません。

Studio活用のポイント

ここからはStudioを利用する上で、重要だと感じたポイントについてご紹介します。チーム内で大事にしていたことは、Studioでの実装を前提としたデザインにするという点です。

前述した通り、非常にデザインの自由度が高いStudioですが、どうしてもStudioで実装するには不向きなデザインがあります(たくさんの要素を重ねるデザインや複雑なアニメーションなど)。そういったStudioでできないこと/向いていないことを事前に把握しておくことで、実装時にStudioだと実装できない!となることを避けられ、スムーズに実装を進めることができました。

Studioの向き不向きを探るワークショップStudioで制作されたサイトを事前に確認し、Studioの向き不向きをデザイン前にインプット

サステナブルWebデザインガイドラインを参考に制作し、サイトのCO2排出量を削減!

昨年に続き今年の年末挨拶サイトもサステナブルWebデザインの考えに則って制作をおこないました。ここからは、サステナブルWebデザインを実現するためにおこなったことやその成果をご紹介します。

サステナブルWebデザインとは

サステナブルWebデザインは、ユーザーの使いやすさと環境への配慮を最優先にWebサイトをデザインする手法です。Webサイトにおける、UXの向上、電力消費量やCO2排出量の抑制などを通じて、ユーザー、環境、さらには社会やビジネスにとって良いサステナブルなデザインの実現を目指しています。

メンバーズではサステナブルWebデザインガイドラインとチェックリストを公開しています。詳しくはこちらから

サステナブルWebデザインの実践方法

今年の年末挨拶サイト制作では、サステナブルWebデザインを実現するために以下の2点をおこないました。

チームメンバーでワークショプをおこない、サステナブルWebデザインに対する理解を深める
プロジェクトの初期段階で、チームメンバー全員でメンバーズが公開しているサステナブルWebデザインガイドラインについて理解を深めるためのワークショップをおこない、今年の年末挨拶サイトでどのように実現するかのアイデアを出し合いました。プロジェクト初期にチームメンバー全員でサステナブルWebデザインについての解像度を上げることで、デザインや実装フェーズそれぞれの段階でサステナブルWebデザインを意識した制作をおこなうことができました。

サステナブルWebデザインについてのワークショップサステナブルWebデザインについてのワークショップをおこない、理解度を向上

Studioを利用することで自動的にサステナブルWebデザインが実現
サステナブルWebデザインの要素として、画像の最適化やソースの最適化、サーバー負荷軽減などの項目がありますが、Studioを利用することで自動的に「画像フォーマットの最適化」「ホスティングサーバーのグリーン化」などをおこなうことができ、Studioを利用するだけで一定の環境負荷軽減をおこなうことができました。

Studio導入による環境負荷軽減の表Studio導入による環境負荷軽減について

サステナブルWebデザイン実現のポイント

サステナブルWebデザインを実現する上で非常に難しかったポイントが、作りたいクリエイティブとサステナブルWebデザインの原則との両立です。例えばサステナブルWebデザインの原則では「画像の使用量を減らす」というものがあります。しかし、今年の年末挨拶サイトのテーマは「シンプルにわかりやすく伝えることを重視したサイト」だったため、できるだけ文章が堅苦しくならないように、図解やイラストを積極的に活用したいという意見がありました。

これらを両立させるために、図解で補足すべき部分がどこなのかを協議し、必要な部分にはちゃんと図解を設置しつつ、実装する際には画像がStudioで自動的にWebPに変換されるので、そこでサイトの軽量化・アクセス時の消費電力抑制につなげるといったような工夫をしていました。

このように、作りたいデザインとサステナブルWebデザインの原則が乖離する部分があったため、うまく双方を実現できるポイントを探っていくことが、デザイン性・ユーザビリティを確保しながらサステナブルWebデザインを実現する上で大切だと感じました。

年末挨拶サイト制作を振り返って

今回の年末挨拶サイト制作について、PM・ディレクターを担当した上松とアートディレクター・デザイナーを担当した堀口から、それぞれの視点で振り返っていき、学びや気づきを共有できればと思います。

PM・ディレクター視点から振り返る年末挨拶サイト

私たちは普段クライアントワークがメインで、お客さま企業の商品・サービスや方針をふまえたクリエイティブ制作をおこなうことが多いのですが、今回はある程度サイトの方向性だけが決まっていて、それ以外のクリエイティブの方向性などを自分たちで決めることができ、とても新鮮な気持ちで取り組むことができました。

Studioを活用したノーコード制作にしたことで実装工数が短縮でき、その分プランニングに時間をかけて、チームメンバー全員でワークショップをしてクリエイティブの方向性やコンセプト決めを納得するまでおこなえた点も非常に良い経験でした。

ワークショップ時に出たアイデアのグラフィックボードメンバー全員でワークショップをおこない、クリエイティブの方向性やチャレンジしてみたいことを議論

また、プロジェクトを通して、改めてStudioをはじめとしたWebサイト制作の技術の進歩を体感することができました。メンバーズがこれまで培ってきたWeb運用の知見とStudioのデザイン性とスピード感が合わされば、お客さまのビジネス成果創出により貢献できると確信しているので、これからの業務でも積極的に取り入れられるよう提案していければと思います。

アートディレクター・デザイナー視点から振り返る年末挨拶サイト

年末にこのページが皆さんの元に届いたときに、見た人にどんな体験や、感情の変化があって、どんな表情で、どんな感覚を味わってもらいたいのか?一から向き合って考えたときに、「クリエイティブで心が震える体験を届けたい」という思いが強く湧いてきました。そのためには、自分たちも全力で楽しんで心を震わせながら作ること。

案件ではいろいろな制約や条件はあるものの、いつもこうして真剣にワクワクしながらクリエイティブを探求する大切さと、その楽しさを改めて実感しながら制作させていただきました。本サイトを通して、一年の日が美しく沈み、新たな希望の朝日が登ってくるような変化を楽しんでいただけると嬉しいです。

また、今回サステナブルWebデザインを追求することで、サイトの軽量化、情報整理などをおこなうことができ、結果としてユーザビリティの向上につなげることができたと思います。今後の案件でもよりよい体験を作り出すためにも、この観点について一層深め、環境とユーザー両軸に配慮したWeb/コンテンツ制作をご提案していきたいと思いました。

最後に

今回のプロジェクトでは、以下を両立させるために、メンバー全員で協力して、議論を重ねながらサイト制作に取り組みました。
    • サイトを見にきてくれた人に、1年の感謝をクリエイティブを通して伝えること
    • サステナブルなWebサイトであること
この経験は、実際にお客さまのビジネス成果向上創出、脱炭素の実現のために、お客さまと同じ目線に立って、現場で伴走しながらDXを推進することにも通じる経験となったため、今回の学びを活かしてこれからの業務にも取り組んでいければと思います。

ここまでご覧いただきありがとうございました!年末挨拶サイトについてはこちらより閲覧いただけます。制作チームの想いを込めた年末挨拶サイトをぜひご覧ください!(2025年2月28日までの限定公開)

 

執筆者紹介

株式会社メンバーズ

「“MEMBERSHIP”で、心豊かな社会を創る」を掲げ、DX現場支援で顧客と共に社会変革をリードする、株式会社メンバーズです。

ページ上部へ