BLOG

文字を強調するWebデザイン12選+バナー応用例
2022年10月5日

『このバナーのココの文字、強調して』 ディレクターやクライアントからこう指示されたら、 Webデザイナーの皆さんならどうデザインしますか? 動画以外では、基本的に画像+テキストで情報を伝えるWebサイト。 魅力的な情報でないと、読んではもらえません。 文字を強調して大切な文節だ ...

JavaScriptでランダム出題の4択クイズを作ろう【配列から質問と回答を取得】
2022年9月28日

昨今のウェブサイトではさまざまなクイズが公開されていますよね。そんなクイズですが、JavaScriptを使うと簡単に作ることができます。 質問文と回答の選択肢を用意しておき、画面を切り替える、といった方法もありますが、今回は配列の中にある質問文と回答を取得し、HTMLの中身を動的に切り替え ...

プログラムにおける命名規則や記法に則り、時間と労力を削減!
2022年9月28日

最近、自分自身が2年ほど前に書いたコードを書き直すタイミングがありました。 その頃は複数人でコードを書くことや、自分自身が読み返す際のことも一切考慮せず、 とにかく楽して書くということをしていたので、コードは本当にひどいものでした。 コード自体はそれほど難しい内容ではなかったのです ...

【入社から半年】新卒デザイナー同士で話し合ってみた!(新卒デザイナーBLOG4期目 2022年9月)
2022年9月27日

やっと暑い日々から解放されて過ごしやすい気候になってきましたね。 しかし毎日の洋服選びが難しい気温でもあるので早く冬になってほしいなと思ってしまいます(笑) 今回のデザイナーブログでは、入社半年を迎えた新卒デザイナーのお二人にテーマに沿って話し合っていただきました! 来年の新卒さん ...

入社から半年、エンジニア週末課題に挑戦!(新卒エンジニアBLOG4期目 2022年9月)
2022年9月27日

ここ数日で一気に秋の空気になった感じがします。 個人的に秋が一番好きな季節なので、嬉しいです。 公園で紅葉をみながら読書をするのを楽しみに、日々過ごしております! 今回はエンジニア週末課題について、詳しくお話を伺いました。 また、来年の新卒さんが今の時期に気になりそうなことも数点 ...

pictureタグ・srcset属性の使い方を分かりやすく解説!【検証用デモページあり】
2022年9月15日

Webサイトのコーディングで、画面幅によって表示させる画像を変更したいとき、どのように対応していますか? 今までは .pc-only / .sp-only といった表示切替用のクラス名を用いて対応するのが一般的でした。 しかし、この方法では画面幅関係なくどちらの画像も読み込まれてしまうた ...

アフィリエイトって難しい。(社長日記 2022年9月)
2022年9月14日

少し前から、アフィリエイトによって収益を生むことができるか! という事にチャレンジしています。 テーマに沿ったサイトを作成し商品を紹介。 そちらに広告から流入を増やして、広告費とアフィリエイト収益との差分で 利益が生まれるか、否か。というものです。 現時点での結論は非常に難しい ...

新卒エンジニアI.Yさんのとある1日を紹介!(新卒エンジニアBLOG4期目 2022年8月)
2022年8月31日

暑すぎて溶けそうになるような日が続いていますね…。 日差しが強すぎて、もはや痛いと感じます…。 いい天気の日が多いので「今日こそは外出しよう!!」と思うのですが、暑すぎて毎回断念します。 室内と室外の温度差が激しいので、体調にだけは気を付けましょう…! 今回は「新卒エンジニアI. ...

【Webデザイン】100サイトのOGP画像を調査し傾向をまとめました
2022年8月30日

SNSでWebサイトを共有するときに、より注目してもらうために重要なのが「OGP画像」です。 サイトに合わせた適切なOGP画像を設定することで、SNS上でのキャッチーさや、サイトに対するイメージを視覚的にアピールすることができます。 今回は100のウェブサイトの画像を調査し、コーポレ ...

SEOにも影響あり!?アクセシビリティを考慮したコーディング
2022年8月29日

みなさんコーディングをするときにアクセシビリティを考慮してコーディングをしていますか? 私は今までアクセシビリティというものを一切考慮せずにコーディングをしてきました。 しかし、実務を経ていくうちに利用者には色々な方がいて、 どんな人でもサイトを利用できるように制作することが重 ...

実機確認でよくある崩れとその対策(Safari、margin、flex など)
2022年8月29日

静的コーディングが終わり、実機で確認をしてみるとSafariでスタイルが崩れていることが多いです。 逆に、MacOSのSafari14.1以降とiPhoneのiOSのSafari14.5以降には対応しているというスタイルもあります。 ですので、今回は「Safariで崩れるプロパティ」「全ブラウザ ...

先輩に気になる質問をしてみよう!(新卒デザイナーBLOG4期目 2022年8月)
2022年8月26日

まだまだ暑い日が続きますね。 なんと、今年の秋は、例年より暑くなるそうです... 今回のデザイナーブログはいつもと違った形式です! 新卒の方が先輩へ気になる質問をぶつけてみました! それでは、新卒デザイナーブログです! [toc] 紹介 まずは今回のデザイナーブログ ...

WEB制作依頼時に決めておくと良い項目14選
2022年8月24日

これからWEB制作を依頼しようとしている方で、「知識がないし、制作会社に依頼する前に決めておいたほうがいいことが何かわからない…」そう思っている人は多いのではないでしょうか? そう困っているあなたに依頼前に決めておいた方がスムーズに制作が進む情報が何かをご紹介します! これさえ知って ...

【初心者必見】Laravelを1から入門してTodoアプリを作ってみよう
2022年8月17日

この記事では、Laravelの使い方を知り、以下のような簡単なWEBアプリケーション(Todoアプリ)を作成し、作って学ぶ内容となっています。 「これからLaravelを学びたいかた」「そもそもLaravelって?」「PHPと何が違うの?」といった疑問についても、初心者目線で、でき ...

2023年新卒採用終盤です。Webデザイナー募集中!(社長日記 2022年8月)
2022年8月16日

3月からスタートした新卒採用もいよいよ終わりに近づいています。 準備から入れると半年以上採用活動をしていたような感じです。 去年に実施すると記載した内容も準備万端でスタートした 23年採用について、まだ終わってないですが振り返っていきたいと思います。 これを見て、我こそは!と ...

比較表・料金表を分かりやすくデザインするポイント+スマホ対応例
2022年8月10日

Webデザインでは、サービス内容や料金の違いをユーザーに分かりやすく見せるために 比較表、料金表を作成することがあります。 他社との違いを比較できたり、 複数プランの特徴や料金が理解しやすく Webサイトのコンバージョン率のアップにつながる重要な役割があります。 比較表のデ ...

jQueryプラグイン「noUiSlider」を使って上限・下限を設定できるレンジスライダーを簡単に実装【デモ付き】
2022年8月10日

ECサイトなどで価格の範囲を決めて商品を検索する機能があるとき、音量の調整や明るさの調整をするUIのようなデザインで作成されていることがありますね。 このような入力欄を「レンジスライダー」といいます。 レンジスライダーの実装には、input要素のtype属性「range」を利用す ...

新卒エンジニアが今後開発してみたいこと(新卒エンジニアBLOG4期目 2022年7月)
2022年7月27日

一気に暑くなったと思えば雨が降り、「戻り梅雨」なんて言葉をよく聞いた7月でした。 ここまで暑いと冬の寒さが恋しくなります…。 熱中症にだけは気を付けてこまめに水分補給をしましょうね…!! 前回まではインタビュー形式をとっていましたが、 今月は今後開発してみたいことを「発表」形式で紹介 ...

涼しく過ごしたい7月の振り返り(新卒デザイナーBLOG4期目 2022年7月)
2022年7月27日

猛暑の日が続き、近頃例年よりやや遅れて蝉の声が聞こえ始めたな~と思えば7月もあっという間に終わります。 この暑さはいつまで続くんでしょうか…最近帰宅時に暑いと結構体力を削られているので、せめて夜は少しでも涼しく…!楽に帰宅したい!と思うばかりです。 それでは今月の新卒デザイナーBLOGに ...

【最新バージョン4】Splideの使い方を徹底解説!-14個のデモ付き-
2022年7月25日

WEBサイトにスライダーを実装したことがある人は多いですよね。 そんなときいつも何を使用していますか? スライダーのJSライブラリで有名どころとして以下の3つがあります。 ・slick ・Swiper ・keen-slider 私は今までslickを使っていました。 ...