【コーディング用語集】ベーシック認証
- 2020年8月20日
ベーシック (BASIC)認証とは、WebサイトにIDとパスワードの鍵をかけるための機能です。
HTTPで定義される認証方式の一つで、最も基本的なユーザ認証方式です。
【コーディング用語集】ハンバーガーメニュー
- 2020年8月19日
ハンバーガーメニューとは、主にスマートフォンやタブレットに見かける三本線「≡」のアイコンのナビゲーションメニューです。
スマホメニューとも言われ、アイコンをタップするとメニューなどの項目が出現します。
最近ではPCサイトでも使われていますが、表示エリアが少ないスマホサイトでは大変役立ちます。
【今日の一枚 Instagram】ちょうちん
- 2020年8月18日
雑貨イラストシリーズ、本日はちょうちんです。
今回は動きます！ゆらゆらと雰囲気ありますね。
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は、WordPressに「お問い合わせフォーム」を追加する国産のプラグインとして、多くの方に使用されています。Contact Form 7は入力内容の確認画面がありません。画面遷移を行わず、1つのページでお問い合わせの送信を完了できる点が特徴です。
日本ではお問い合わせフォームというと、入力内容の確認画面もセットで存在するイメージがありませんか？しかし海外では、お問い合わせフォームの入力後は、確認画面がないことが一般的です。このような文化の差もあり、Contact Form 7は日本国内だけではなく、海外でも使用者の多いプラグインとなっています。
▷ Contact Form 7：https://contactform7.com/ja/
■MW WP Form
-
MW WP Formは、Contact Form 7と同じく、WordPressの「お問い合わせフォーム」を設置する国産のプラグインとして有名です。MW WP Formは、入力画面 > 確認画面 > 完了画面 の順に画面遷移を設定することが出来ます。
コーディング初心者の方や、HTMLを触るのが苦手な方には、デザインを管理画面で作成できる有料の追加アドオンがあります。こちらの公式サイト（MW WP Form Generator）に詳細がありますので是非チェックしてみて下さい。
▷ MW WP Form：https://plugins.2inc.org/mw-wp-form/
「Contact Form 7」と「MW WP Form」の共通点
-
・高機能でカスタマイズ性に優れている
・使用者が多いため、使い方を解説したWebサイトが数多く存在する
・HTMLやCSSの知識が必要（初心者の方は、難しく感じるかもしれません）「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ページのことです。
