こんにちはディーメイクでwebデザイナーをしている鈴木です。
今回もさらっと説明する【Webサイトに関する基礎知識シリーズ】です。
このシリーズはWeb制作の現場でよく使われる言葉や
基本的な知識などをさらっと書いています。
第7回目となる今回はWebサイトを作る時に出てくる言葉についての解説の2回目です。
前回より少し専門性が高いかなと思う言葉を選んでみました。
目次
1.全般
・GUI
Graphical User Interfaceの略で、パソコンなどの画面でユーザーが使いやすいように
アイコンやボタンなどをグラフィカル(絵的)に表示してある画面を指します。
それらをクリックやタップで操作できるようになっています。
パソコンのデスクトップに並んでいるフォルダやアプリだけではなく、
デジカメの画面で操作できるメニューなどもGUIです。
・CUI
Character User Interface の略で、パソコンなどの画面でユーザーが
テキストコマンドを入力してプログラムを操作する仕組みやアプリを指します。
エンジニアさんなどが文字を打って作業している時に使っている
「黒い画面(コマンドプロンプト)」がCUIです。
基本的にはキーボードのみで動かします。
・API
Application Programming Interfaceの略で、
システムどうしをつないでデータや機能をやり取りできるようにするインターフェースのことです。
APIを利用することでweb上での手続きを簡単にしたり、
複数のサービスを連携して、いちいち入力する手間を省くことができます。
・インターフェース
英語のinterface(接点)のことで、画面や機器どうしをつなぐシステムや企画のこと。
人に対してのインターフェースはキーボードやマウス、タッチスクリーンなどですが、
制作の場面ではユーザーが目にする画面を指すことが多いです。
システム開発などの場面ではソフトウェアやシステム間をつなぐものを指すことか多いです
・ブロックチェーン
同じデータを複数の場所(台帳)に分散して管理するデータベース技術のこと
分散型台帳とも言います。
複数のデータをブロックのようにまとめ、それらを繋げて管理します。
基本的には修正も取り消しもできないため高い安全性があると言われています。
・NFT
Non-Fungible Tokenの略で、日本語訳だと「代替不可能なトークン」という意味。
ブロックチェーンを基盤にしたデジタルデータでデジタルアイテムに対する証明書のようなものです。
NFTでは作者や所有者などをはっきり示すことができるため
デジタルアートなどの証明書などに利用されてます。
・オープンソース
プログラムなどのソースコードが無償で公開されていること。
改造して使ったり再配布することも可能ですが
オープンソースでもライセンスはそれぞれにあるので確認は必要です。
・XML
文章の構造をわかりやすく記述するためのマークアップ言語の一種。
HTMLとの違いは、HTMLが主に人が見るWebページ等の表示のための言語なのに対し
XMLはデータのやり取りなど機器がわかりやすいことに特化した言語です。
2.フロントエンド
・コンパイル
英語のcompile(編集する)のことで、ソースコードをコンピューターが実行可能な形式に変換することです。
人が理解や利用しやすように書かれているコードをコンピューター用のコードに翻訳するイメージです。
通常コンパイラと呼ばれるプログラムを使って行います。
・逆コンパイル
コンピューター用のコードを人が理解できるように変換することを逆コンパイルと言います。
翻訳の翻訳になるので必ずしも元のソースコードになるとは限らないため
修正などの際は、通常逆コンパイルではなく元のソースコードを修正して行います。
・タスクランナー
Web制作の際に必要な処置を自動化してくれるツールのこと。
コンパイルやファイルの最適化などの作業を自動で行なってくれます。
必要に応じて機能を組み合わせて使用します。
・git
ソースコードやファイルの変更履歴を管理することができる
「分散型バージョン管理システム」のこと。
GitHubやGitLab、Bitbucketなどサービスが有名です。
・リポジトリ
英語のrepository(倉庫)のことで、さまざまなデータやファイルなどを置いておく場所のことです。
リモートリポジトリとローカルリポジトリの2種類のリポジトリがあります。
・リモートリポジトリ:サーバー上に設置して共有するためのリポジトリ
・ローカルリポジトリ:自分のマシンで作業するときに使うリポジト
3.ツール
・Bootstrap
Twitter社によって開発されたフロントエンドフレームワークのこと。
CSSとJavaScriptのコンポーネントがあらかじめ用意されているので
利用することでスピーディなフロント部分の開発が期待できます。
・UIkit
Bootstrapと同じくフロントエンドフレームワークです。
Bootstrapよりも見た目がスッキリとしたシンプルなコンポーネントが特徴で
上品なUIを実現できると言われています。
・Tailwind CSS
「ユーティリティクラス」をまとめてあるCSS フレークワークです。
Bootstrapのcssと似ていますが、Tailwind cssには
あらかじめ用意されているコンポーネントはないため自分で組み合わせて使う必要があります。
・Pure.CSS
Yahooが開発したCSS フレークワークです。
シンプルな機能で構成されていてファイルサイズが小さいのが特徴です。
デフォルトはかなりシンプルで、サイトのデザインに合わせてカスタマイズして使用します。
・WordPress
CMSの一種でブログを作ったり、Webサイト作ることができるプラットフォームです。
各種レンタルサーバーでも簡単にインストールできるようになっているたり
オープンソースのため無料で始められるなど導入のハードルも低めです。
サポートなどについて、基本は自分で検索になりますが
利用者が多いので比較的情報は得やすいと思います。
・Movable Type
CMSの一種でブログを作ったり、Webサイト作ることができるプラットフォームです。
Movable Typeも個人利用であれば1つまで無償で利用できますが、商用の場合は有償になります。
その為導入のハードルは少し上がりますが、日本法人もありサポートなどもしっかりしています。
企業などのサイトを作る場合や、ガッツリとカスタマイズしたサイト作る場合に向いています。
・ヘッドレスCMS
フロント(ユーザーが見たり接する場所)が別になっているCMSのこと。
APIを利用してコンテンツを配信するため、cmsとフロント部分を別々に作ることができます。
自由度が高く、リニューアルや仕様の変更にも対応しやすいですが
その分知識も必要になるためハードルはやや高めです。
4.まとめ
IT関連の仕事をしていると言葉もツールもどんどん新しいものが出てきます。
全てを知っている必要はないと思いますが
興味を持ったりアンテナを張っておく事は大切だと思っています。
ディーメイクで働いているとプロモーションサイトやシステム開発案件
cmsやECサイトなど、いろんなサイトを作るチャンスがあるので
仕事の中で自然と知識や情報を得られることも多いです。
仕事を通して成長したいと思った方、幅広い案件に関わることに興味を持った方は
ぜひディーメイクで一緒に働きましょう!
こちらの記事もチェック!
アクセス解析やディレクションに興味も持ったらこちら
Webサイトの種類についてはこちら