BLOG ブログ

みなさんは「慣性スクロール」や「パララックス」という言葉を聞いたことがありますか？　マウスで実際に動かした分よりも少し遅めにスクロールが反応し余韻が残るような効果を出す動作や、各コンテンツを異なる速度で移動させる動作などを指しています。 最近、この2つのエフェクトが実装されたウェブサイ ...

Webサイトを作るうえで欠かせないものの一つに「フォント」を挙げられますが、世の中には数多の新規フォントが日々登場していますよね。フォントが変わるだけで、サイトの雰囲気全体がガラッと変わってしまうくらい、その影響力は計り知れません。できることなら上手く活用したい。今回はそんな想いをかなえてく ...

就活にポートフォリオは欠かせませんね。 Web業界に就職したいと考えている学生さん向けに、ポートフォリオに載せるためのWebサイトの作り方についてまとめてみたいと思います。 本記事では特にコーディング初心者さん向けに、フォルダ構成やリセットcssなど、かなり初歩的な内容を分かりやすく説明 ...

デザイン通りにコーディングできるようになってきてプログラムにもそこそこ強くなったけど、Awwwardsなどに掲載されているWebサイトを見ているとどうやって作られているかわからない…そんな経験はありませんか？ 今回はモダンなブラウザで良く見るWebサイトを少し豊かにする知識と技術を簡単にまとめ ...

入社して仕事に慣れてきた時、こんな状況になったことはありませんか？ 「作業した後のデスクトップが汚い...」 「キャプチャをもっと手早く簡単に撮りたい...」 筆者も同じ状況に悩まされました。 フォルダを５つ以上も開いていたり...。余計なところまでキャプチャを撮ってしまったり. ...

最近ではアニメーションが実装されたWebサイトも多くなり、趣向を凝らしたリッチな演出を取り入れているサイトもそう珍しくなくなってきました。 特に重要な要素を動かすことで興味を引かせたり、飽きずに読み進めてもらうためのきっかけになったり、といったメリットがありますよね。 ただ、アニメーショ ...

こんな人におすすめ！ ・動画制作をやってみたいけど、どのソフトを使えばいいのか分からない ・あの動画、どのソフトで作ってるの？ ・After EffectsとPremiereどっちを使った方が就職に有利？ 動画編集をやってみたい、と思ったらほぼ間違いなく選択肢に出 ...

ボタンの横にアイコンを配置することが多々ありますよね。 そんなとき、画像を書き出さなくてもアイコンフォントを使えば、簡単に設置できるので紹介します！ 【目次】 概要 事前準備 ダウンロードして使う CDNを使う ...

HTMLコーディングをしていて、見た目では完璧にデザイン通りになっていると思っていても実際比べてみるとすごくズレてる… 皆さんそういう経験あるのではないでしょうか。 まず気を付けないとどれぐらいズレてしまうのか、また努力次第でどれぐらいデザイン通りになるのか比較してみました! まず ...

WEBサイト制作に欠かせない要素である写真… 予めクライアントが撮影された・購入した画像を頂ければ一番良いのですが、 素材サイトより写真の選定をお願いします！となって困った経験をした人、居るんじゃないでしょうか。 私も写真探しに苦労し、時間をかけてしまってたあのころを振り返って、今回は写真 ...

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

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

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

前回はポートフォリオの作り方についてまとめました。 今回は新卒でWebデザイナーを目指す人のポートフォリオにどんな中身が必要か、書いていこうと思います！ 【目次】 ポートフォリオの中身 載せておきたい作品 その１．既存のWebサイトのトレース その２．既存のWebサイトのリニ ...

就活の季節ですね、コロナの影響もありなかなか動けず悩んでいる学生さんもいるのではないでしょうか… 今回はデザイナーとして就職活動をするには必須となる、ポートフォリオについて紹介していきます。 【目次】 ポートフォリオとは ポートフォリオの種類 紙媒体ポートフォリオ ページ構成 ...

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

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

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

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

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