ブログBLOG

【2020年版】ヘッダー・メガメニュー・スマホメニューのデザイン参考まとめ

世の中には様々なウェブサイトがありますが、ほとんどのサイトで取り入れられているのがヘッダーですね。 皆さんはどのようなデザインを思い浮かべますか？ PC時のデザインであれば、「左端にロゴがあり、右端にナビゲーションとしてリンクがある」といった形を想像される方が多いのではないでしょうか。 作成する機 ...

スマホの傾き検知、Web制作で使える？ or 使えない？

スマートフォンでアプリを使っていると、時々デバイスの傾きで画面内もお洒落に傾く事があるかと思います。 Webでも出来るかなと思い調べたところ「DeviceOrientationEvent」というものが見付かりましたので、簡単なデモを作成してみました。 今回は手軽にwebpackとBabe ...

Premiere Proで動画を軽量化して、Webサイトの表示速度を上げよう

Web制作を担当するにあたり、背景に動画を流す機会が増えてきました。会社やサービスの印象を動画で視覚的に紹介できるため、導入する企業は増えているかと思います。ですが、動画のサイズが重いとページを開くまでに時間がかかり、サイトの離脱が増えたり、少しもやもやしたりしてしまいますよね。 そんなとき、 ...

新卒でWebデザイナーになる為に必要なポートフォリオの中身

前回はポートフォリオの作り方についてまとめました。 今回は新卒でWebデザイナーを目指す人のポートフォリオにどんな中身が必要か、書いていこうと思います！ [toc heading_levels="2"] ポートフォリオの中身 Webデザイナーになりたいなら中身の作品が ...

新卒でWebデザイナーになる為のポートフォリオの作り方

就活の季節ですね、コロナの影響もありなかなか動けず悩んでいる学生さんもいるのではないでしょうか… 今回はデザイナーとして就職活動をするには必須となる、ポートフォリオについて紹介していきます。 [toc heading_levels="2"] ポートフォリオとは ここで紹介するポー ...

HTMLをWordPress化！やりやすいコーディング方法をレクチャー【手順付】

無料で使用できて、コンテンツの管理が簡単にできる上に、カスタマイズ次第でなんでもできるWordPress。なんでも全世界のサイトの4分の1はWordPressが使われているとかいないとか。 弊社でもWordPressの案件は多く、リニューアルから新規作成など多岐にわたります。 中でもHT ...

【テレワークにもオススメ】デザイン修正指示ツール徹底比較！【AUN・MONJI】

コロナウイルスの影響で、在宅勤務やテレワークスタイルになった会社も多いのではないでしょうか？ 修正指示をいつも口頭でしていた場合、依頼者・担当者に距離があるとどうしてもやりとりがしづらくなってしまいます。 PDFに手書きをして送る場合は担当者が文字を判別出来なかったり、単語のコピペ出 ...

2020年に再ブーム?!スキューモーフィズムをCSSで取り入れよう

2020年のWebデザインのトレンドはいろいろありますが、その中で注目したいのが「スキューモーフィズム」。 この記事では「スキューモーフィズムとはなんぞや？」という話から実際にデザインやコーディングに取り入れられる要素をご紹介します。 後半では、CSSだけでできるスキューモーフィズムをご紹介 ...

slick sliderの使い方からカスタマイズまで【スライダープラグイン決定版】

「スライダーを実装したい！」「でも何を使えばいいの？」という方に朗報です。 この記事ではスライダーを作成するプラグイン「slick」の設定方法から使い方、カスタマイズまでをしっかりばっちり説明していきます。 slickを使えばデザイナーやディレクターの要望にばっちり応えられること間違いな ...

リキッドレイアウトでデザインするコツ!!コーディングのやり方まとめ

Webデザインのスタンダードのひとつである「リキッドレイアウト」。 実はレスポンシブデザインとの違いがよくわからないとか、コーディングしてみたらなんだかうまくいかなかった・・・なんてことありませんか？ この記事ではリキッドレイアウトのメリットと、実際にコーディングするうえでのポイントを解 ...