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は、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ページのことです。

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

初めてのお客様はこちらからどうぞ

お見積りはこちらから

資料請求はこちらから

  

GAレポート

wordpress実装 初期費用0円 ワードプレス構築

下層ページデザインサービス

Coding Pack News Letter

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

お得な情報満載!

バックナンバーはこちら

最新納品実績

  • コーディング

    1P

    2020.07.28

    大学

  • コーディング

    1P

    2020.07.20

    ブランディングサイト

  • コーディング

    3P

    2020.07.16

    病院

  • コーディング

    1P

    2020.07.15

    都道府県サイト

  • WordPress

    4P

    2020.07.09

    介護施設

more

pagetop