Mengapa KomuraSoft membuat situs dengan design system Digital Agency — biaya rendah dan mutu dapat berjalan bersama

Porsi besar dalam penawaran pembuatan situs web adalah jam kerja produksi desain. KomuraSoft memangkas tahap ini secara signifikan dengan memakai design system yang dipublikasikan Digital Agency sebagai fondasi, sehingga biaya ditekan sekaligus mutu dijaga tetap stabil.

Kalau mendengar “pembuatan situs web murah”, banyak orang mengira mutu dikorbankan di suatu tempat. Memang, menurunkan harga dengan melewatkan wawancara kebutuhan, atau hanya menuangkan teks ke templat, sering menghasilkan situs yang tidak menyampaikan apa yang dikerjakan perusahaan.

Alasan harga Pembuatan Situs Web (pembuatan homepage) KomuraSoft bisa ditekan bukan karena itu, melainkan standardisasi tahap desain. Artikel ini menjelaskan berurutan: apa itu design system Digital Agency yang dipakai sebagai fondasi, apa yang benar-benar dipakai dan bagaimana, mengapa biayanya turun, mengapa mutu tidak turun, dan untuk jenis proyek apa pendekatan ini tidak cocok.

Selanjutnya, nama layanan kami ditulis “Pembuatan Situs Web”; untuk sebutan proses secara umum kami memakai “pembuatan situs web”.

1. Apa itu design system Digital Agency

Design system Digital Agency adalah spesifikasi desain standar yang dipublikasikan Digital Agency untuk situs web dan aplikasi layanan pemerintahan. Sumber primer ada di situs resmi.

• Situs resmi: Design system Digital Agency, versi β
• Lisensi dan syarat penggunaan: Catatan penggunaan

Secara garis besar, hal-hal seperti berikut didefinisikan secara sistematis.

Yang penting: ini didistribusikan secara umum di bawah syarat lisensi yang dipublikasikan, dan boleh dipakai juga di situs swasta. Situs prosedur pemerintahan harus bisa dipakai siapa pun, tanpa memandang usia, lingkungan, atau tingkat familiaritas dengan IT, sehingga kontras, ukuran teks, dan kemudahan operasi dirancang setelah diverifikasi. Hasil akumulasi itu bisa langsung dipakai sebagai fondasi juga untuk situs perusahaan swasta.

Syarat lisensi yang konkret

Kalau diringkas sebagai “lisensi terbuka”, keputusan praktis tidak bisa diambil. Di Catatan penggunaan resmi, lisensi ditunjukkan terpisah per jenis materi yang didistribusikan.

Dalam praktik ada dua poin. Pertama: kalau data Figma atau cuplikan kode diedit dan diolah lalu dimasukkan ke situs sendiri, pencantuman sumber tidak diminta. Saat design system ini dipakai untuk membuat situs perusahaan, sebagian besar kasus berbentuk itu. Kedua: dinyatakan tegas bahwa materi yang sudah diedit atau diolah tidak boleh dipublikasikan atau dipakai dengan cara seolah-olah Digital Agency yang membuatnya.

Selain itu, pemakaian tidak memberi sertifikasi atau persetujuan dari Digital Agency. Posisi kami juga bukan “disertifikasi Digital Agency”, melainkan menerapkan spesifikasi standar yang sudah dipublikasikan ke situs swasta. Syarat lisensi di atas adalah kondisi pada saat artikel ini ditulis, jadi sebelum memutuskan untuk mengadopsi, periksa selalu syarat terbaru di halaman resmi.

Pada diagram, garis utuh menunjukkan relasi yang selalu berlaku dan garis putus-putus menunjukkan relasi bersyarat (syaratnya ada pada penjelasan masing-masing relasi di halaman rincian). Daftar lengkap relasi (total 15, beserta bukti dan tingkat kepastian) serta definisi konsep utama dikumpulkan di halaman rincian peta pengetahuan (dalam bahasa Jepang). Data: JSON-LD / Turtle

2. Apa artinya “memakai sebagai fondasi” secara konkret

Ungkapan “memakai design system sebagai fondasi” praktis, tetapi tingkat detail implementasinya bisa beberapa lapis. Di sisi kami, pengambilannya dibagi menjadi tiga lapisan berikut. Situs ini sendiri (comcomponent.com) memakai struktur itu.

Perlu ditulis juga apa yang sengaja tidak kami lakukan. Kami tidak membawa utuh kode komponen yang didistribusikan resmi lalu mengelolanya sebagai dependensi eksternal. Komponen yang dibutuhkan situs perusahaan terbatas; mengimpor set penuh membuat pemuatan situs lebih berat, dan muncul biaya perawatan untuk mengikuti pembaruan di hulu. Keputusannya: hanya menyimpan komponen yang diperlukan, sebagai implementasi sendiri yang mengikuti spesifikasi.

Efek struktur ini muncul saat halaman ditambahkan. Meski satu halaman layanan baru ditambah, bentuk tombol, hierarki judul, dan spasi tetap selaras dengan halaman yang sudah ada, sehingga tidak perlu memikirkan “bagaimana desainnya” setiap kali.

3. Mengapa biayanya turun — tahap desain hilang dari penawaran

Penawaran pembuatan situs web yang lazim memuat porsi besar butir terkait desain. Di tabel cepat kisaran biaya pembuatan situs web untuk UKM, konfigurasi yang mencakup desain orisinal masuk kisaran 300.000–1.000.000 yen, dan di dalam kisaran itu tahap desain menumpuk kira-kira dari pekerjaan berikut.

Apa yang tercakup dalam butir “paket desain” di surat penawaran berbeda-beda per perusahaan, jadi saat membandingkan, yang andal adalah meminta diurai sampai tingkat rincian ini (cara membaca itu dibahas lebih rinci di artikel tentang biaya).

Kalau design system dipakai sebagai fondasi, strukturnya berubah.

• Acuan palet warna, ukuran teks, spasi, dan tombol sudah ditentukan sejak awal
• Putaran “menyajikan beberapa usulan desain, memilih, lalu merevisi” pada prinsipnya tidak diperlukan
• Keputusan yang bergantung pada intuisi desainer berkurang, sehingga pengerjaan ulang jarang terjadi

Dengan kata lain, harganya turun bukan karena diskon, melainkan karena prosesnya sendiri menyusut. Jam kerja yang dihemat dialihkan ke bagian yang benar-benar terkait hasil — merancang struktur yang menyampaikan apa yang dikerjakan perusahaan, menulis teks, dan merancang alur pertanyaan. Penyebab situs tidak menyampaikan pesan hampir selalu ada di struktur, bukan di desain; itu sudah kami tulis di tiga tempat yang harus diperbaiki lebih dulu pada situs yang tidak menghasilkan pertanyaan.

4. Mengapa mutu tidak turun — justru lebih stabil

Intuisi “kalau desain dihilangkan, mutu turun” berangkat dari anggapan bahwa desain dibuat dari nol. Kalau yang dipakai adalah design system yang sudah distandarkan, logikanya terbalik.

Pertama, aksesibilitas. Komponen design system Digital Agency dirancang dengan mempertimbangkan kontras warna, ukuran teks, visibilitas fokus, dan kemudahan operasi sentuh. Kalau tingkat itu harus dijamin setiap kali pada desain proyek individual, verifikasinya sendiri memakan jam kerja. Memakai komponen yang sudah diverifikasi justru membuat mutu lebih stabil.

Kedua, rekam jejak operasi nyata. Layanan pemerintahan dioperasikan di situasi nyata oleh pengguna yang sangat luas, dari orang yang belum terbiasa dengan ponsel sampai spesialis. Aturan desain yang dipakai di sana tidak diasah dengan “apakah tampilannya baru”, melainkan dengan “apakah siapa pun bisa memakainya tanpa tersesat”. Sifat itulah yang penting bagi calon pelanggan yang datang ke situs perusahaan.

Ketiga, konsistensi. Situs yang bentuk tombolnya atau aturan judulnya bergeser dari halaman ke halaman sudah lebih sulit dibaca karena itu saja. Mengikuti design system membuat struktur dan nada tidak pecah meski halaman ditambah belakangan.

Situs ini sendiri dibangun di atas design system itu. Studi kasus pembaruan situs Douzu Carry Service juga dibangun dengan kebijakan yang sama. Cara kerja pembaruan itu sendiri dirinci di artikel studi kasus.

Untuk melihat komponen mana yang benar-benar bekerja, cara tercepat adalah membandingkan halaman nyata. Titik pemakaian di situs ini sebagai berikut.

Penerapan komponen yang sama di situs lain adalah Douzu Carry Service. Palet warna, foto, dan teks tentu berbeda sama sekali, tetapi kalau diletakkan berdampingan, terlihat bahwa kemudahan menekan tombol dan cara hierarki judul disusun mengikuti aturan desain yang sama.

5. Standardisasi tidak berarti “tampak sama”

Kekhawatiran yang sering muncul: “kalau desainnya standar, bukankah tampilannya akan sama dengan situs perusahaan lain?”

Yang distandarkan adalah bagian fondasi: acuan palet warna, sistem ukuran teks, dan aturan desain komponen. Yang benar-benar menentukan kesan situs adalah logo, foto, slogan, struktur halaman, dan nada tulisan, dan itu dibuat dari nol per situs. Fondasi yang selaras dan ketiadaan karakter adalah dua hal yang berbeda.

Di sisi lain, ada yang perlu dikatakan dengan jujur. Pendekatan ini tidak cocok untuk proyek yang membutuhkan visual kustom rumit atau animasi sebagai ekspresi merek. Contohnya situs merek atau situs kampanye yang nilai utamanya ada pada penciptaan suasana visual. Pada proyek seperti itu, hasilnya lebih baik jika desain benar-benar diinvestasikan dan dikerjakan studio desain yang khusus. Kalau dari konsultasi kepada kami ternyata permintaan semacam itu yang menjadi pusat, kami akan mengatakannya secara terbuka sejak awal.

6. Ringkasan

• Dalam biaya pembuatan situs web, desain dari nol menempati porsi besar
• KomuraSoft memangkas tahap ini secara signifikan dengan memakai design system yang dipublikasikan Digital Agency (situs resmi) sebagai fondasi
• Lisensi terbagi per jenis materi: data Figma memakai CC BY 4.0, cuplikan kode memakai MIT License. Jika diedit dan diolah lalu dimasukkan ke situs sendiri, pencantuman sumber tidak diperlukan
• Isi “memakai sebagai fondasi” adalah tiga lapisan: menyeragamkan design token, menjadikan komponen sebagai kelas CSS, dan memasukkannya ke templat
• Alasan harganya turun bukan diskon, melainkan proses yang menyusut. Jam kerja yang dihemat dialihkan ke perancangan struktur, teks, dan alur pertanyaan
• Mutu justru lebih stabil karena komponen standar yang dipakai dirancang dengan pertimbangan aksesibilitas dan sudah beroperasi di layanan pemerintahan
• Logo, foto, dan teks dibuat per situs, jadi tampilannya tidak menjadi sama. Namun pendekatan ini tidak cocok untuk proyek yang membutuhkan visual kustom rumit

Kalau tujuannya menekan biaya sekaligus membuat situs yang strukturnya menyampaikan pesan, cara kerja dan harga bisa dilihat di halaman Pembuatan Situs Web. Kalau menghubungi kami dengan menyertakan URL situs yang ada sekarang, kami akan menata kembali apa yang paling efektif diperbaiki lebih dulu.

Artikel terkait

• Biaya pembuatan situs web untuk UKM — tabel cepat kisaran harga dan cara membaca penawaran
• Studi kasus pembaruan situs: Douzu Carry Service, perusahaan angkutan di Miyazaki
• Tiga tempat yang harus diperbaiki lebih dulu pada situs yang tidak menghasilkan pertanyaan
• Pembuatan Situs Web

Artikel terkait

Artikel terbaru dengan tag yang sama untuk mendalami topik-topik terdekat.

Topik terkait

Halaman-halaman ini menempatkan topik dalam konteks layanan dan keputusan yang lebih luas.

Layanan yang terkait dengan topik ini

Artikel ini berkaitan langsung dengan layanan berikut.

Pertanyaan yang sering diajukan

Pertanyaan yang sering muncul dalam konsultasi tentang topik artikel ini.

Bolehkah design system Digital Agency dipakai di situs perusahaan swasta?

Boleh. Digital Agency memublikasikan design system-nya dengan lisensi terbuka, dan boleh dipakai juga di situs di luar lembaga pemerintah. Namun pemakaian itu tidak memberi sertifikasi atau persetujuan dari Digital Agency. Posisi kami pun sama: menerapkan design system yang sudah dipublikasikan ke situs swasta.

Kalau desainnya distandarkan, bukankah situs kami akan tampak sama dengan situs perusahaan lain?

Yang diseragamkan hanyalah aturan desain untuk palet warna, spasi, dan komponen. Logo, foto, slogan, dan struktur halaman dibuat per situs. Kesan nyata justru ditentukan bagian itu, jadi standardisasi tidak membuat situs menjadi "situs yang sudah pernah dilihat di tempat lain". Sebaliknya, bagian yang memang harus seragam — kemudahan menekan tombol dan keterbacaan teks — itulah yang terseragamkan.

Profil penulis

Halaman perkenalan penulis artikel.

Go Komura

Direktur KomuraSoft LLC

Berspesialisasi dalam pengembangan perangkat lunak Windows, konsultasi teknis, dan investigasi bug, terutama pada proyek dengan sistem yang sudah ada dan bug yang sulit direproduksi.