スタッフブログ

menu

【コーディング用語集】ハンバーガーメニュー

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は日本国内だけではなく、海外でも使用者の多いプラグインとなっています。

▷ 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のみならず、画像も管理できる点が嬉しいと感じています。興味をお持ちの方は、是非導入を検討してみてはいかがでしょうか。