サイト制作

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

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

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

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

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

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

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

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

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

Adobe Creative Cloud（以下 Adobe CC）に契約しているユーザーが利用可能なサービスに、Adobe Fonts(旧名 typekit)というものがあります。 追加料金なく、全フォントを商用・個人用問わず利用可能となっております。 Futuraなど有名な欧文フォ ...

「WEB制作」という言葉を聞いたときに皆さんが思い浮かべる仕事はどのようなものでしょうか。 デザインを考えたり、コーディングしたり、システムを構築するなど、現場では様々な作業工程が存在します。 当たり前のことですが、そういった業務を行うためには、まずはクライアントから案件として制作の ...

近年、背景に斜め線を使用しているサイトがしばしば見受けられますよね？ 弊社の制作実績でも斜め線を使用したサイトをいくつか掲載しています。 株式会社オーカム：https://www.ocam.co.jp/ こういったコーディングを過去に経験している人なら分かると思いますが、ちょっとてこず ...

皆さんはAdobe Creative Cloudライブラリ、通称『CCライブラリ』は活用していますか？ AdobeCCを利用されている方、特にコンプリートプランなどであれば様々なソフトを自由に使う事が出来ます。 WEBデザイナーさんであれば、Adobe製品はPhotoshopやXD、Il ...

いまやスマートホンを持っていない人はいないくらい、携帯端末が普及しました。 とは言いつつも、ホームページのフォームはまだパソコンの画面幅にしか対応していないサイトもちらほらと見かけます。 モバイル表示に対応するのはハードルが高いように感じるかもしれませんが、意外にも簡単です。 今回 ...

もうすぐオリンピック開催年の2020年！最新のWebデザイン参考サイトをサイト、レスポンシブ、ランディングページ、バナー別にまとめてみました。 参考サイト自体が最新デザインであったり、使いやすい・見やすいサイトを厳選しました。 これからのデザイントレンドをチェックするのに是非ご活用くださ ...

ワイヤーフレームとは別称「画面設計」と呼ばれるもので、Webサイト制作の工程の中で一番初めに作成されるものです。ビジュアル的には簡素ですが、非常に重要な工程です。 ワイヤーフレームを作成せずそのままデザインを起こしていく場合もありますが、その際もデザイナーの頭の中ではワイヤーの設計レベルの ...

新しいデバイスの開発や通信の発達、急速なスマートフォンの普及で５年前に作ったサイトでも古く感じてしまうホームページ。今や会社の情報発信源、顔として必須のホームページも物理的な看板のようにリニューアルをする必要がありますよね。 「そろそろ自社のホームページをリニューアルしたいなぁ」と思った理 ...

みなさんはブラウザのプラグインを使っていますか？YouTubeの広告をブロックしてくれるものや、YouTubeの再生速度を変えてくれるプラグインなどは便利ですよね。 今回はYouTubeのプラグインの話ではなく、「Webサイト制作で役に立つ」Google Chromeプラグインについてご紹 ...

  「日付入力フォームを作ってほしい」 あなたはそう言われたら、どうやって実装しますか？ HTML5になって追加された「input[type=date]」を使うでしょうか。それともプラグインを使うのでしょうか。 どちらにも一長一短があり、設置するサイトの目的に応じて柔軟 ...

WordPressでサイトを構築する際に、TDK（title, description, keyword）の設定を行う上でとても便利なプラグイン「All in One SEO」というものがあります。 自動で適切なdescriptionにしてくれたり、SNS向けのmeta情報を出力してくれたりし ...