スタッフブログ - コーディングの外注・代行なら｜コーディングパック

menu

Retinaとは？

2020年8月17日

一般的にRetinaと言うと MacやiPhone、iPadなどのApple製品に搭載された高解像度ディスプレイのことを指します。

Retinaディスプレイの特徴
Retinaディスプレイは、肉眼では認識することが出来ない細かい画素を表示することが可能で、従来のディスプレイの倍の解像度を再現することが出来ます。そのため、Retinaディスプレイに映るコンテンツは細部まで鮮明に美しく描写されます。

このように、Retinaディスプレイの特徴は、従来のディスプレイの倍以上の解像度で画面描画する点です。
解像度には、「ppi（pixels per inch：ピクセルパーインチ）」という単位が使用されます。ppiは、1インチ（2.54cm）の中に含まれるピクセルの数を表します。この「ppi」の値が高ければ高いほど、高解像度ということになります。

Retinaディスプレイ搭載前のiPhone 3Gは 163ppi でしたが、Retinaディスプレイを搭載したiPhone 4は 326ppi という高密度な画素数になっています。Retinaディスプレイを搭載することにより、解像度が倍以上に向上し、より色鮮やかな表現が可能になっているのです。

Webサイト制作において、Retinaディスプレイ対応で注意する点
Retinaディスプレイは通常の倍の密度で表示するため、画像は「端末の横幅」×「2倍以上」のサイズが必要になります。これまで通りの画像サイズでは、表示がぼやけてしまうため注意が必要です。

Webサイトのデザイン作成で注意する点について、さらに詳しい内容は当スタッフブログの「スマホサイトのデザイン作成で注意する点について」に掲載しています。ご興味のある方は、是非ご覧になってください。

スマホサイトのデザイン作成で注意する点について

まとめ
今回は、Retinaディスプレイについてご紹介しました。
高解像度ディスプレイと言えば「Retina」ですが、実はRetina以外にも高精細ディスプレイはあります。
例えば、WindowsやAndroidでも、高解像度で美しいグラフィックが特徴のデバイスが増加しています。ところが、画面が精細になった反面、眼精疲労に悩むという方が増えています。この場合、画面の表示スケールを自分好みに調整することで眼精疲労を緩和することが出来ますので、「画面の表示スケール」についてご興味のある方は是非調べてみて下さいね。

WordPress「お問い合わせフォーム」のプラグインについて

2020年8月10日

Webサイトの運営に「お問い合わせフォーム」の設置は欠かせませんよね。そこで今回は、WordPressに「お問い合わせフォーム」を追加する時に人気のあるプラグインを2つご紹介します。

■Contact Form 7

日本ではお問い合わせフォームというと、入力内容の確認画面もセットで存在するイメージがありませんか？しかし海外では、お問い合わせフォームの入力後は、確認画面がないことが一般的です。このような文化の差もあり、Contact Form 7は日本国内だけではなく、海外でも使用者の多いプラグインとなっています。

▷ Contact Form 7：https://contactform7.com/ja/

■MW WP Form

コーディング初心者の方や、HTMLを触るのが苦手な方には、デザインを管理画面で作成できる有料の追加アドオンがあります。こちらの公式サイト（MW WP Form Generator）に詳細がありますので是非チェックしてみて下さい。

▷ MW WP Form：https://plugins.2inc.org/mw-wp-form/

「Contact Form 7」と「MW WP Form」の共通点

「Contact Form 7」と「MW WP Form」の違い

まとめ

WordPressに追加する「お問い合わせフォーム」のプラグインを2種類ご紹介しました。
1つの画面でお問い合わせの送信を完了させたい場合は「Contact Form 7」、入力内容の確認画面が必要な場合は「MW WP Form」、というように2つのプラグインを使い分けても良いかもしれませんね。

【コーディング用語集】バナー

2020年8月10日: バナー（banner）とは、「旗」や「のぼり」を意味します。Webページ上では他のWebページを紹介する役割を持つ画像です。
画像にリンクを貼ることで、紹介するWebページへ移動できる仕組みになっています。

【コーディング用語集】リソース

2020年8月6日: リソース (resource)とは、直訳すると「資源」という意味です。Web制作においては作業に必要な能力や容量を指す場合が多いです。

【コーディング用語集】人日

2020年8月5日: 人日とは、作業量を表現する際に使われる単位のひとつです。
「1人でやった場合、〇日かかります。」もしくは「1日で終わらせるなら〇人必要です。」という意味になります。

【今日の一枚 Instagram】タコの紙風船です

2020年8月4日: 雑貨イラストシリーズ、本日はタコの紙風船です🐙
タコとはめずらしいですね。宇宙人にも見えませんか？
↓イラストをクリックしてインスタも覗いてみてください。

【コーディング用語集】動的ページ

2020年8月3日

動的ページとは、アクセスしたときの状況に応じて異なる内容が表示されるWebページのことです。
アクセス時に最新情報に更新されてたブログ、お知らせ、紹介記事やユーザーごとに異なる情報を表示させるECサイトや会員制サイトなどが動的ページです。

動的ページとは逆に静的ページと言うものがあります。
何度アクセスしても毎回同じものが表示されるHTMLで作成されたWebページのことです。

Gitとは？

2020年8月3日

Git（ギット）とは、分散型(※1)バージョン管理システムのことです。
Gitは、Linuxのプログラムソースコードを管理するために開発されましたが、最近ではプログラマーだけでなく、WebデザイナーやWebライターの方にも使用されています。そこで今回は、「Gitで出来ること」にフォーカスを当ててご紹介します。

※1：分散型とは、複数のPCに分散して機能を持たせることを意味します。

ファイル管理の悩み

Gitを使用しないファイル管理では、編集前のファイルをコピーしてバックアップ用のファイルを作ることが一般的です。しかし、バックアップファイルの作成には手間が掛かり、ファイル数が増えてくると管理が煩雑になります。また、チーム作業では他人の編集内容を間違って上書いてしまう恐れもあります。このように、ファイル管理にはそれぞれ悩みがあるのではないでしょうか。

Gitで出来ること

Gitでは、「誰が、いつ、どんな変更」をしたのか確認できます。さらに、過去のファイル内容に戻したり、変更内容の差分を確認することも可能です。差分は、「変更前」と「変更後」を並べて見ることができ、一目瞭然で変更箇所が分かります。

そのため、ローカル環境にバックアップファイルを作成する必要がなくなり、手間が減ります。
チーム作業では、他人が編集したファイルを上書きしようとすると警告が出るため、誤って編集内容を上書きするミスを軽減できます。また、Gitはテキストデータだけでなく、さまざまな種類のファイルを管理できます。

このように、Gitを使うとファイル管理がとてもラクになります。しかし、Gitを使っていてもファイル管理は慎重に行うよう心掛けましょう！

Gitのメリット

Gitのメリットは、次の点が挙げられます。

まとめ

Gitは、プログラマーに限らず、Webデザイナーにも使用者の多いバージョン管理システムです。GitはHTMLやCSSのみならず、画像も管理できる点が嬉しいと感じています。興味をお持ちの方は、是非導入を検討してみてはいかがでしょうか。

【コーディング用語集】ディレクトリマップ

2020年7月30日

ディレクトリマップとは、Webサイトの全てのページのURLとタイトルがまとめられている一覧表のことです。

↓弊社が用意しているシートの記入例です。

【コーディング用語集】チャットボット

2020年7月29日: チャットボット（chatbot）とは、「チャット」する「ボット(ロボット)」を組み合わせた言葉で、
「自動会話プログラム」のこと。
想定される問い合わせ内容を登録し、入力されたテキストや音声に対して自動的に回答してくれます。
最近では多くの企業がWebサイトにチャットボットを実装し、問い合わせ業務の効率化などを行っています。

Coding Pack News Letter

コーディングパックのメールマガジン

Web制作という仕事は高度な仕事・・・｜コーディング代行・外注のコーディングパック