レイアウトシフト

皆さま、こんにちは。
今週は近藤が担当します。

皆さんは、webサイトで例えば読みたい記事のリンクをクリックしようとした際に、レイアウトが突然移動して広告が表示され、読みたい記事をクリックする代わりに、広告をクリックした経験はありませんか?
私は何回かその経験がありますが、ページ上のその突然の動きは、『レイアウトシフト』と呼ばれます。

レイアウトシフトは、ページがロードされる際に画像のスペースが確保されず、画像が表示された際にその分レイアウトがずれてしまうことです。
対策は、コーディングの際、HTMLまたはCSSに必ず画像のサイズ指定をすることです。
ユーザーにとってフラストレーションを感じるだけでなく、SEO的にも低評価につながりやすいということなので、制作側としてはしっかり対応していきたいと思います。

随筆

今週は斎藤が担当します。
この頃は、少しずつ暖かくなり、日も長くなってきており、春を感じますね。

「春はあけぼの〜」でお馴染み枕草子を書いた清少納言。
今回は、清少納言について少し調べてみました。

清少納言は「三十六歌仙」(さんじゅうろっかせん)のひとり
「清原元輔」(きよはらもとすけ)の娘として生まれました。
歌人である父も含め、その友人たちからも大層可愛がれたそうで、
幼少時代は早熟だったそうです。
清少納言はそういった幼少期を過ごし、知的で気が利く機知に富み
明るく、ユニークな人物と言われていたそうです。

ちなみに、清少納言の「清」の部分は、清原の「清」だそうです。

清少納言のユニークさを物語っているのは、やはり「枕草子」です。
例えば、第百四段 見苦しいものという部分では、容姿が良くない人に対する
なんとも言えない痛烈な表現の一段があります。

【原文】
見苦しきもの。(中略)夏、昼寝して起きたるは、よき人こそ、いますこしをかしかなれ。
えせ容貌は、つやめき、寝腫れて、ようせずば、頬ゆがみもしぬべし。かたみにうち見かはしたらむほどの、生けるかひなさや。

【訳】
見苦しいもの。夏に昼寝するのは高貴な人なら風情があるが、不細工の場合顔は脂ぎるわ、パンパンにむくんでいるわ、なんなら顔そのものが歪んですらいるようだ。
不細工同士が昼寝をして互いに顔を見合わせてしまった時なんか、生きている意味すらわからないほどだ。

この段を初めて読んだ時、少し笑ってしまいました。
枕草子は随筆で、公に見せることは無いことを前提としているので
清少納言は、こういった直接的な言葉で心情をつらつらと書いてしまったのかなと思いました。

現在大河ドラマでは平安時代を舞台とし、紫式部が主役のものが放送しているので
見てみようかと思いました。

3月11日

みなさまこんにちは。原田です。

今日3月11日は東日本大震災が起きた日ですね。
あれから13年経ちましたが、もうそんなに経ったのかという気持ちと、まだまだはっきりと当時のことが思い出されるなという気持ちと両方あるような気がします。

自然災害が多い日本ですが、大切なのは普段の災害に対する備えです。
最近の防災グッズを調べてみて個人的に気になったのは、ギフトとして防災グッズを贈るサービスです。
ギフトを選ぶことで、贈る相手はもちろん自分も防災のことを考えることにもなるし良いアイデアだなと思いました。

正直私は防災の備えが普段できているとは言えないので・・、こういう意外な場面からでも防災意識を少しでも高めていけたらなと思います。

ウェブサイトとサーバー

皆様、こんにちは
マネジャーの宮本です。

ウェブサイトを立ち上げるには通常、サーバーが必要になります。
※サーバーを必要としないサービスを提供している場合もあります。

サーバーとはウェブの構築・公開する際にデータを置く場所とでもいいましょうか。
そのサーバーのサービスを提供する会社は色々とありますが、
どこかしらのサーバー会社との契約が必要となってきます。
※弊社でもサーバーは提供しています。

どのサーバー会社を利用すれば良いかが悩むところではあります。
ウェブサイトの内容(コーポレートサイトなのか、ECサイトなのかなど・・・)
によってサーバー会社それぞれのプランも変わってきますので
ご予算などお聞きしながら、そのあたりも含めて弊社ではご提案させていただいています。

ウェブサイトを新しく立ち上げる場合にはそのほかに、ドメインも必要です。

ウェブサイトのURLとなるものですが(弊社の場合はdac-inc.co.jp)、このドメインも取得する必要があります。

以上のことから、
新しくウェブサイトを立ち上げるにあたって必要なものは大きく分けると、ウェブサイトのデータ・サーバー・ドメインの3つが必要となります。

ご予算や立ち上げたいウェブサイトによってご提案も変わってきますので、ウェブサイトの構築(リニュアル)をお考えの方はお気軽にご相談くださいませ。

彫刻の森美術館

お久しぶりです。瀧浪です。

現在育休中ですが、良かったらたまにはブログに顔出してねとお声がありましたので出してみました (笑

先日、彫刻の森美術館に足を運びました。

広大な敷地内に美術と自然が見事に融合した場所です。

カラフルで印象的な彫刻や見上げる程の巨大彫刻、体験型の巨大アート迷路等…

多様な美術品が豊富に展示されておりどの世代でも楽しめます。

個人的にはピカソ館が印象深かったです。

ピカソが生涯目指した芸術は”子どもらしい絵”だそうですよ。

純粋で素直な感性というのは子どもの方が長けてるということですね。様々な名言集も見ものでした。

自然を満喫しながらのアート鑑賞、箱根観光の際にいかがでしょうか。

コードストックのすすめ

皆様、こんにちは。
今週は近藤が担当します。

今回は、コーディングのためのコードストックをおすすめしたいと思います。
エディタに、よく使用するコードを登録しておくスニペット登録も便利ですが、ヘッダー・スワイパー・モーダル・・など、ある程度決まった型があるものは、コードストックにまとめて記載して管理すると、コピペ→サイトに合わせて少しカスタマイズするだけでよいので、時短になります。

私はNotionで管理していますが、表示形式をボードビューにすると、css,HTML,js・・など作成したカテゴリーごとにコードが表示され、一発で探せるのでとても便利です。
「コードストック」で検索すると、Notionでのまとめ方など詳しく説明してくれている記事もあるので、ぜひ調べてみてください。

雪の季節

みなさまこんにちは。
今日は原田がお送りします。

先日関東地方は雪が降りました。雪に慣れない地域で生活していると数センチでも積もれば歩くだけで大変です・・。
最近は雪の予報が出ると交通機関も前もって通行止めや運休をアナウンスして、気象ニュースでは強い注意を呼びかけることが多くなりました。

さてそんな雪も降る季節にちなみ、今回はフォトショップで普通の風景が雪景色になるような画像加工をしてみました。色々なシチュエーションに合わせて加工できるので、画像素材のバリエーションが増えそうです。さらに細かく調整して、よりリアルな加工を追求するのも楽しいかもしれませんね!

エラー


今週は、斎藤が担当いたします。
仕事中にIllustratorのソフトを開くと、エラーが表示されることがありました。
こういったエラー以外にも、多くのエラーに月に一度は必ず遭遇するので、
今回は、エラーはどのような種類のものがあるのだろうと気になり調べてみました。

—————————————————————
・400:Bad Request
不正な要求。

・401:Unauthorized
認証失敗のレスポンスコード。WEBサイトにアクセスするにはIDやパスワードが必要なことを表しています。

・402:Payment Required
主に、必要な資金が不足しているためにリクエストを処理できないということを表しています。
例:Shopifyの料金を支払っておらず、ストアが一時的に無効になっているときなど

・403:Forbidden
クライアントがアクセス制限などを設定している場合に返されます。
アクセス権がないとWEBサイトにアクセスできないことを表しています。

・404:Not Found
こちらは、ポピュラーなエラーではないでしょうか。
ページが存在しない場合や、ページを削除したり、ホームページをリニューアルしてURLが変わった時などに表示されることが多いです。

・405:Method Not Allowed
サーバー側で、クライアントが要求する処理の実行を禁止している場合に返る。

・406:Not Acceptable
受理できない内容を含むリクエストがあった場合に返る。

・407:Proxy Authentication Required
クライアントが*プロキシサーバーを通じてインターネットへアクセスしようとした際に、プロキシサーバーからの認証が必要であることを示すエラーコードです。
*プロキシサーバーとは、クライアントとインターネットとの間に位置するサーバーであり、ユーザーのインターネット接続の安全性を高めたり、ネットワークのパフォーマンスを向上させるために使用されます。

・408:Request Timeout
サーバーが、ブラウザからの残りのリクエストを待機してタイムアウトになったことを意味します。このコードは、ブラウザからの完全なリクエストを待っている間にサーバーがタイムアウトすると返されます。

・409:Conflict
要求の競合。リクエストが処理中のリソースと競合しているため完了不能になっている。

・410:Gone
要求されたリソースがなくなっており、消滅している状態を指します。これは「404 Not Found」コードに似ていますが、410は永続的であり二度と復活しないものであることを意味します。

—————————————————————

400番台のエラーコードだけでも割と種類があります。
ちなみにこれはHTTPステータスコードといい、100番台〜500番台まであります。
今回は、エラーコードの400番台のみのご紹介となりましたが、
他のステータスコードも調べていて、面白かったのでぜひお時間ある時は調べてみてください。

ホームページ製作の流れについて

皆様、こんにちは
マネジャーの宮本です。

新しい年になり、早くも1月が終わろうとしています・・・。

さて、今回は少しだけホームページの構築についての流れをご説明します。

お客様からホームページ作成のご依頼を受けてからの流れとしましては
まず初めに、トップレイアウト案をお出しすると言うところからになります。

そしてお客様へレイアウト案をご覧いただき、何度か案を出し直し,ようやくレイアウトが決まると、そのトップページの構築(コーディング)や、その他のページ(下層ページ)のデザイン・構築作業へ入っていきます。

LPサイト(ランディングページ)の場合も同様の流れとなります。
レイアウト案が決まれば、あとは構築して完成です。

ここで弊社の場合、ワードプレスをベースとしたホームページを構築する場合は
通常のホームページ構築作業の後に、ワードプレスへ落とし込む作業が加わってきます。
また、その他ワードプレスの環境構築設定などもあります。

なので、ワードプレスへ落とし込む作業をする前段階ではすでに、ホームページとして見た目は完成している状態で、そこからさらにワードプレス仕様へ作りこむと言うことになります。

以上が、ざっとホームページの製作過程となります。

作業期間はホームページの内容によって様々となりますが、規模に限らず、大まかな流れは以上の様な感じです。

※ホームページについてのご相談はお気軽にお問い合わせくださいませ!

新機能『生成拡張』

皆さまこんにちは。
今週は近藤が担当します。

先日、Photoshopの新機能「生成拡張」を試してみました。
生成拡張機能とは、切り抜きツールなどで画像以上にカンバスを広げた際にできる余白を、自然に補完してくれる機能です。
上図は私が実際に試してみた際のBefore/Afterの画像です。
ほぼ違和感なく生成してくれることに驚きましたし、なにより操作が簡単なのがとてもいいと思いました。
サイズを広げ、「生成」をワンクリックするだけでできます。
テキストに「犬」「飛行機」などと表示させたい物の名称を入力することもできます。
画像の背景を違和感なく広げるという作業はしばしばありますが、意外と手間がかかることなので、今後はこの機能もうまく利用していきたいと思います。