現在のホームページ制作で学んでおきたい技術・ソフトウェア

2020.09.09.

ホームページ制作

便利なツール

株式会社TREVOの月額制ホームページ制作サービス
PR

ホームページを作ってみたいという方に学んでおいた方が良い技術やソフトウェアを紹介していきたいと思います。
2020年9月現在の技術とソフトウェアという事で10年前と比べると覚える事が増えました。
今後も覚える事は増え続けるとおもいますがソフトウェアや制作環境の進化で制作や新しい技術の導入のハードルは下がっていると思います。
ウェブの世界は日々進化しているので、追いつくのは大変だとはおもいますがソフトウェアや学ぶ環境も進化しているので学びやすい時代になっています。

デザイン( 画像編集ソフト)

画像編集ソフトは、デザイナーがデザインを制作する時に使用する以外にも、ディレクターがUI・UXを設計したりコーダーがデザインデータを受け取り、コーディング用のデータ作成や余白やフォントサイズなどを確認する時に使用します。

ウェブデザインは、ウェブサイトの制作とメンテナンスにおいて、多くの異なるスキルと分野を勉強する必要があります。
デザイナーはユーザビリティを意識することが求められの事が多いとおもいます。役割がマークアップの作成を含む場合は、ウェブアクセシビリティのガイドラインを最新の状態に保つことも重要な仕事となります。
Adobe XD、Adobe photoshop、AFFINITY PHOTOなどの画像編集ソフトを使用したデザイン系のソフトウェアでのデザインです。

2020年版 ホームページ制作 で使用するソフトウェア-画像編集ソフト(デザイン)」を参考にしてください。

デザインに含まれる仕事

  • ロゴ、レイアウト、ボタンなどのサイトのビジュアルを作成するグラフィックデザイナー
  • ユーザー中心のデザイン、ユーザーテスト、インタラクションデザイン、そして時にはビジュアルデザインを含む、ユーザーに焦点を当てたデザイン

HTML

コーディングの基本言語となります。

ハイパーテキスト・マークアップ言語(HTML)は、Webブラウザで表示されるように設計された文書のための標準的なマークアップ言語です。
Webブラウザは、WebサーバまたはローカルストレージからHTML文書を受け取り、マルチメディアWebページにレンダリング(表示)します。
HTMLは、ウェブページの構造を記述する事でブラウザ上にホームページを表示します。

HTMLページの構成要素です。HTMLの構成要素では、画像やインタラクティブなフォームのような他のオブジェクトをレンダリングされたページに埋め込むことができます。
HTMLは、見出し、段落、リスト、リンク、引用符、その他の項目などのテキストの構造的意味を示すことで、構造化された文書を作成するための手段を提供します。

HTMLは、JavaScriptなどのスクリプト言語で書かれたプログラムを埋め込むことができ、ウェブページの動作や内容に影響を与えます。
CSSを含めることで、コンテンツの見た目やレイアウトが定義されます。
CSS標準の現在のメンテナーであるWorld Wide Web Consortium (W3C)は、1997年以来、明示的な提示型HTMLよりもCSSの使用を奨励しています。

CSS

コーディングでホームページ上の文字や画像のサイズ、色、余白設定などで使用する必須の言語です。

CSSは、レイアウト、色、フォントなどの表示とコンテンツの分離が可能な言語です。
分離により、コンテンツのアクセシビリティの向上、表示特性の指定の柔軟性と制御性の向上、複数のウェブページでフォーマットを共有することが可能となり、構造的なコンテンツの複雑さや繰り返しを軽減することができます。
CSSには、コンテンツがモバイルデバイスでアクセスされた場合の代替フォーマットのルールもあります。

CSSの仕様は、World Wide Web Consortium(W3C)によって維持されています。

JavaScript

ホームページ上で動き(インタラクティブ)を制御する上の必須の言語です。

JavaScriptは高レベルで、しばしばジャストインタイムコンパイルされ、マルチパラダイムです。
JavaScriptは、カーリーブラケット構文、動的型付け、プロトタイプベースのオブジェクト指向、およびファーストクラスの関数を備えています。

HTMLやCSSと並んで、JavaScriptはWorld Wide Webのコア技術の1つであす。JavaScriptはインタラクティブなWebページを可能にし、Webアプリケーションの重要な部分です。
大多数のWebサイトでは、クライアント側のページ動作にJavaScriptを使用しており、すべての主要なWebブラウザには、JavaScriptを実行するための専用のJavaScriptエンジンが搭載されています。
もともとWebブラウザでのみ使用されていましたが、現在では一部のサーバに組み込まれており、通常はNode.jsを介して使用されています。
また、ElectronやCordovaなどのフレームワークで作成された様々なアプリケーションにも組み込まれています。

.httaccess

ホームページのURL制御などで使用する必須の言語です。

.htaccess (ハイパーテキストアクセス) ファイルは、いくつかのウェブサーバでサポートされているディレクトリレベルの設定ファイルで、URL リダイレクト、URL 短縮、アクセス制御 (異なるウェブページやファイルのための) などのウェブアクセスの問題を設定するために使用されます。
ファイル名の前に「ドット」(ピリオドやフルストップ)を付けると、Unix ベースの環境では隠しファイルになります。
サイトは複数の .htaccess ファイルを持つことができ、ファイルはウェブツリーの中 (つまりディレクトリとそのサブディレクトリの中) に配置され、そのため、他の名前は分散設定ファイルです。

CMS(WordPress)

ホームページを運用する上で必要なソフトウェアで、ホームページ制作(コーディング)の知識のない担当者でもホームページを更新出来る様にする為のツールです。

コンテンツマネジメントシステム(CMS)[とは、デジタルコンテンツの作成や変更を管理するために使用されるコンピュータソフトウェアのことで、一般的にはエンタープライズコンテンツマネジメント(ECM)やウェブコンテンツマネジメント(WCM)などで使用されています。
ECMは通常、文書管理、デジタル資産管理、記録保持を統合することで、共同作業環境で複数のユーザーをサポートします。
WCMはウェブサイトの共同オーサリングであり、コンテンツを表示してユーザーと対話するテキストや埋め込みグラフィック、写真、ビデオ、オーディオ、地図、プログラムコードを含むことがある[6][7]。 ECMには通常、WCM機能が含まれています。

日本ではWordPressのシェア率が高く、世界的にも多くのホームページでWordPressが活用されています。
「2020年7月 世界でのCMS使用率とシェアとWordPressのバージョンごとのシェア率」を参考にしてください。
https://www.trevo-web.com/staffdiary/cms202007wordpress.html

PHP

CMSの制御から、予約システムやカレンダーなどシステムを構築する際に使用する言語です。

PHPはウェブ開発に適した汎用スクリプト言語です。
PHP のコードは通常、モジュールやデーモン、あるいは Common Gateway Interface (CGI) の実行ファイルとして実装された PHP インタプリタによってウェブサーバ上で処理されます。
ウェブサーバでは、解釈されて実行されたPHPコードの結果(生成されたHTMLやバイナリ画像データなど、どのようなタイプのデータであってもよい)が、HTTPレスポンスの全体または一部を形成します。
様々なウェブテンプレートシステム、ウェブコンテンツ管理システム、ウェブフレームワークが存在しており、これらを使用してレスポンスの生成を調整したり、容易にしたりすることができます。
PHPはスタンドアロンのグラフィカルアプリケーション[10]やロボット型ドローンの制御など、ウェブのコンテキスト以外の多くのプログラミングタスクにも使用することができます。

MySQL

CMSを導入するさいに使用するデータベースの一つで、その他にもシステムを構築したさいにデータを格納すす際にも仕様する言語です。
CMSのサーバー移転時、オリジナルの拡張機能(プラグイン)追加などで覚えておくと役に立ちます。

MySQLは、オープンソースのリレーショナル・データベース管理システム(RDBMS)です。
共同創立者マイケル・ウィデニウス(Michael Widenius)の娘の名前である “My”、と “SQL “の組み合わせでStructured Query Language(構造化クエリ言語)の略語です。
リレーショナル・データベースは、データを1つ以上のデータテーブルに整理し、その中でデータタイプが互いに関連している可能性があり、これらの関係は、データを構造化するのに役立ちます。
SQLは、プログラマがリレーショナル・データベースからデータを作成、修正、抽出したり、データベースへのユーザアクセスを制御したりするために使用する言語です。
リレーショナル・データベースやSQLに加えて、MySQLのようなRDBMSはオペレーティングシステムと連携して、コンピュータのストレージ・システムにリレーショナル・データベースを実装し、ユーザーを管理し、ネットワーク・アクセスを可能にし、データベースの完全性のテストやバックアップの作成を容易にします。

MySQL は、Drupal、Joomla、phpBB、WordPress などの多くのデータベース駆動型ウェブアプリケーションで使用されています。
MySQLはまた、Facebook、Flickr、Twitter、YouTubeなど、多くの一般的なWebサイトでも使用されています。

Maria DB

MariaDBは、コミュニティで開発され、商業的にサポートされているMySQLリレーショナル・データベース管理システム(RDBMS)のフォークであり、GNU General Public Licenseの下、フリーでオープンソースのソフトウェアであり続けることを目的としたデータベースです。
開発は、MySQLのオリジナル開発者の何人かが主導して開発が続けられています。

関連の記事

Windows10のPowerToysでデスクトップ表示を整理整頓

PCで作業しているとバラバラのサイズのウィンドウを重ねて表示してイライラする事はありませんか? 私はウィンドウを開きすぎて訳が分からなくなり一括で閉じて環境を設定し直すなんて事が多いです。 macで作業しているときはmagnetというアプリでウィンドウの整理をして言いました。 このmagnetに似た[...]

  • 板浪雅樹 板浪雅樹
2020年版 宅ファイル便に変わる大容量ファイル転送サービスのまとめ

宅ファイル便が2020年3月31日を持ってサービスを終了するので代わりとサービスを探してみました。 ホームページ制作やチラシやパンフレットなどの紙媒体の制作を行っていると大容量ファイルの転送サービスは不可欠です。 弊社では、あまり宅ファイル便を使用していなかったのですが、代替えとなるサービスをいくつ[...]

  • Avatar TREVOWP
弊社のSEO対策が実りだしています。

本日、「ホームページ制作 大阪」をgoogleで検索すると1ページ目の8位に表示されました。ドメイン取得からい1年未満ですが、何とか1ページ目に表示されて一安心です。しっかりとしたSEO対策をはじめてから8ヵ月、最初は50位当たりをうろうろしていたのですが三か月目で30位当たりまで上がり、先月やっと[...]

  • Avatar TREVOWP
物事を文章で伝える時に注意したいポイント

物事について直接話をして、ジェスチャーなども含めて伝えることができればいいのですが、常にそれができるとは限りません。 直接話をしたりジェスチャーなどをしたりといったことができない場合、物事を文章で伝える必要が出てきます。 しかしながら、その文章が支離滅裂なものであれば物事を伝えることができないどころ[...]

  • Avatar TREVOWP