Mengapa KomuraSoft membangun situs web di atas design system Digital Agency — biaya rendah dan mutu dapat berjalan bersama

Porsi besar dalam penawaran pembuatan situs web adalah jam kerja desain. KomuraSoft menekan tahap ini secara signifikan dengan bertumpu pada design system yang dipublikasikan Digital Agency Jepang: biayanya tertahan, mutunya stabil.

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

Alasan harga Pembuatan Situs Web KomuraSoft bisa ditahan bukan karena melewati wawancara kebutuhan atau hanya mengisi templat, melainkan standardisasi tahap desain. Artikel ini menjelaskan berurutan: apa itu design system Digital Agency yang kami pakai sebagai fondasi, apa yang benar-benar kami gunakan dan bagaimana, mengapa biayanya turun, mengapa mutu tidak turun, dan untuk proyek seperti apa pendekatan ini tidak cocok.

Selanjutnya, nama layanan kami adalah “Pembuatan Situs Web”; untuk proses umum kami memakai “pembuatan situs web”. Bahasa Indonesia tidak membedakan dua sebutan itu seperti bahasa Jepang, jadi keduanya memakai istilah yang sama.

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 terbuka, 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. 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.

Peta pengetahuan artikel ini

Artikel ini menjelaskan alasan pembuatan situs web Komura Soft berlandaskan design system Digital Agency, dari cara mengadopsi tiga lapisan: design token, komponen, dan templat. Design system Digital Agency menerapkan CC BY 4.0 pada data desain Figma (ikon yang disertakan memakai Apache License 2.0) dan MIT License pada code snippet; pada penggunaan yang mengedit dan mengolah lalu menanamkannya ke situs sendiri, pencantuman sumber tidak diperlukan. Dengan memakai bagian yang sudah distandarkan, proses yang mahal seperti menyajikan beberapa usulan desain dan putaran revisi dipadatkan, sementara tingkat aksesibilitas yang sudah diverifikasi pada layanan administrasi langsung menopang kestabilan mutu. Namun, untuk proyek semacam situs merek yang pusat nilainya adalah penataan dunia visual, cara kerja ini dianggap tidak cocok.

flowchart LR
    accTitle: Peta pengetahuan pembuatan situs web yang berlandaskan design system Digital Agency
    accDescr: Diagram yang menunjukkan bahwa pembuatan situs web Komura Soft berlandaskan design token, komponen, dan templat design system Digital Agency; menekan biaya proses desain sekaligus menjamin aksesibilitas dengan mengombinasikan lisensi masing-masing data Figma, ikon, dan code snippet; serta bahwa pendekatan ini tidak cocok untuk proyek yang membutuhkan visual merek yang rumit
    digital_agency_design_system["design system Digital Agency"]
    website_development["pembuatan situs web"]
    design_token["design token"]
    design_system_component["komponen design system"]
    web_accessibility["aksesibilitas web"]
    digital_agency_copyright_policy["kebijakan hak cipta situs Digital Agency"]
    cc_by_4_license["CC BY 4.0"]
    apache_license_2["Apache License 2.0"]
    mit_license["MIT License"]
    site_template["templat situs"]
    design_process_cost["biaya proses produksi desain"]
    brand_visual_design["desain visual yang berfokus pada ekspresi merek"]
    website_development -.->|"menggunakan"| digital_agency_design_system
    digital_agency_design_system -->|"menggunakan"| design_token
    digital_agency_design_system -->|"menggunakan"| design_system_component
    design_system_component -->|"menggunakan"| web_accessibility
    digital_agency_design_system -->|"menggunakan"| digital_agency_copyright_policy
    digital_agency_design_system -->|"menggunakan"| cc_by_4_license
    digital_agency_design_system -->|"menggunakan"| apache_license_2
    digital_agency_design_system -->|"menggunakan"| mit_license
    website_development -.->|"menggunakan"| design_token
    website_development -.->|"menggunakan"| design_system_component
    website_development -.->|"menggunakan"| site_template
    site_template -->|"mensyaratkan"| design_token
    site_template -->|"mensyaratkan"| design_system_component
    digital_agency_design_system -.->|"mengurangi"| design_process_cost
    digital_agency_design_system -.->|"tidak disarankan"| brand_visual_design

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. Putusannya: 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 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 terbebas 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 pertama yang harus diperbaiki 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 focus, dan kemudahan operasi sentuh. Menjamin tingkat itu 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. 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 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 menekan tahap ini secara signifikan dengan bertumpu pada design system yang dipublikasikan Digital Agency (situs resmi)
• 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 template
• Alasan harganya turun bukan diskon, melainkan proses yang menyusut. Jam kerja yang terbebas 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 — rujukan harga cepat dan cara membaca penawaran
• Studi kasus pembaruan situs: Douzu Carry Service, perusahaan angkutan di Miyazaki
• Tiga tempat pertama yang harus diperbaiki pada situs yang tidak menghasilkan pertanyaan
• Pembuatan Situs Web

Referensi

• Digital Agency, Digital Agency Design System β. Spesifikasi desain standar yang dipublikasikan untuk situs web dan aplikasi layanan pemerintahan.
• Digital Agency, Catatan penggunaan. Lisensi dan syarat penggunaan design system; lisensi untuk data Figma, ikon yang disertakan, dan cuplikan kode ditunjukkan terpisah.
• Digital Agency, Kebijakan hak cipta. Kebijakan hak cipta yang berlaku pada situs design system (teks penjelasan dan pedoman) (Ketentuan penggunaan data publik, versi 1.0).

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. Pemakaian itu tidak memberi sertifikasi atau persetujuan dari Digital Agency. Posisi kami juga bukan "disertifikasi Digital Agency"; kami menerapkan design system yang sudah dipublikasikan ke situs sektor swasta.

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

Yang menjadi bersama hanyalah aturan desain 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.