KKI DESIGN

株式会社KKIデザインチーム「KKI DESIGN」が運営するnoteです。 WEBデ…

KKI DESIGN

株式会社KKIデザインチーム「KKI DESIGN」が運営するnoteです。 WEBデザイン制作のナレッジや、制作したデザイン、社内の取り組みについて発信していきます。 KKI DESIGNサイト：https://kkidesign.v-kki.co.jp/

STUDIOで制作された【クリックしたくなるボタン10選！】

こんにちは、 KKI DESIGNデザイナーの『ヨシダ』です！ WEBサイトのボタンのデザインには、サイトの印象をはじめ、 訪れる人の行動や体験に影響を与えることがあります。 トレンドや進化に適応したボタンは、訪問者を惹きつけ、 サイト内での行動を促進する重要な要素です。 今回はSTUDIO（ノーコードツール）で作成されたクリックしたくなるボタンデザイン10選をご紹介します。 特に動きのあるアニメーションのボタンデザインに悩んだ際の参考にもしていただければ幸いです。 ①文字

KKI DESIGN

    • 知っておきたい！WEB制作会社の選び方

      こんにちは、ʰᵒⁿᵈᵒ~です。 成功するビジネスにとって、効果的なWebサイトの存在は不可欠です。そのためには、適切なWeb制作会社の選択が重要な鍵となります。しかし、多数の選択肢の中から自社のニーズに最適なパートナーを見つけ出すのは、特に初めてWeb担当になった方にとって高いハードルとなります。判断基準が分からず、頭を抱えてしまうかもしれません。 本記事では、そんな悩みを抱える方々に向けて、Web制作会社を選ぶ際の重要なポイントをわかりやすく解説します。 1. 会社の実績

      KKI DESIGN

      • STUDIOでサイトを多言語化する方法

        みなさまこんにちは。KKI DESIGNのシカノ です。 弊社では、STUDIOを使用したWEBサイト制作を行っておりますが、最近特に 多言語対応サイトに関するご相談が増えてきました。 そこで今回は、STUDIOでの多言語対応 について私自身の情報や知識を整理する目的で、記事を書いていこうと思います。 「STUDIOでどこまで多言語対応できるの？」 「そもそも多言語対応は可能？」「どのように実装すればいい？」 といった、WEB制作担当者の方や実際にSTUDIO実装をおこ

        KKI DESIGN

        • グラフィックデザイナーがWEBデザインのセミナーに通ってみて

          こんにちは。 KKIでグラフィックデザイナー・WEBディレクターをしている、はまだです。以前の投稿でも書いたように、私は元々紙媒体や広告のデザイナーをしており、全くWEB制作の知識がない状態で現在のWEBチームに入ることとなりました。 書籍やWEBで色々勉強はしたのですが、実際手を動かしてみないとどうにも掴めない…ということで、今回WEB制作基礎のセミナーを受講させていただきました。 今回の記事ではセミナーの復習も兼ねて、学んだ内容で初めて知ったことや印象に残ったこと、

          KKI DESIGN

        STUDIOで制作された【クリックしたくなるボタン10選！】

        KKI DESIGN

          ノーコードツールSTUDIOの基本機能と操作のご紹介

          こんにちは！ KKI DESIGN のべりお です🐦 先日、弊社のノーコードツールSTUDIOに特化した、 Web制作サービスサイトをリニューアルしました👏 なんと、「STUDIOお役立ち資料」を無料でダウンロードできるようになっています❗️ 今回の記事では、ノーコードツール「STUDIO」の基本操作や魅力などをお伝えします✨ Webサイト制作を検討中の方の参考になりましたら幸いです😊 STUDIOとは？一般的にWebサイトを作る場合「HTML」「CSS」などといった

          KKI DESIGN

          ノーコードツールSTUDIOの基本機能と操作のご紹介

          KKI DESIGN

          絵文字を使ったWEBサイト事例 & デザイン効果の分析

          こんにちは、KKI DESIGN の イワタ です。 今回は、最近見かけるようになった絵文字😃を使ったWEBサイト💻について、事例を調べて🔍みました！ 後半では私なりの絵文字を使用するデザイン効果の分析/考察🧑‍💻と共に、使用する際の注意点🚨をまとめています💁‍♀️ 💻絵文字を使ったWEBサイト事例いくつかの事例を集める中で、絵文字の使用箇所ごとに大きく4つのタイプに分けられることがわかりました。これから、タイプ別にそれぞれを紹介していきます🙋‍♀️ 1.リンクボタンのア

          KKI DESIGN

          絵文字を使ったWEBサイト事例 & デザイン効果の分析

          KKI DESIGN

          STUDIOとHubSpotの連携で、できることと注意点

          こんにちは、KKI DESIGNのてらおかです。 STUDIOではさまざまな外部ツールを連携させることができます。 例えば、サイトの運営に欠かせない「Google Analytics」や「Google Search Console」、悪質なアクセスからサイトを守る「Google reCAPTCHA」などなど… 今回は画像右下にある「HubSpot」とSTUDIOの連携についての記事を書いていきたいと思います。 HubSpotと連携することでなにができるの？ HubSpot

          KKI DESIGN

          STUDIOとHubSpotの連携で、できることと注意点

          KKI DESIGN

          【WEBデザイン勉強法】ギャラリーサイトに掲載されるまでの実践ガイド

          KKI DESIGN デザイナーのイワタです。 今日は、私が独学でWEBデザイナーにジョブチェンジしてから憧れだったギャラリーサイトに掲載されるまでの勉強法ややってみたことをまとめてみました！ 私と同じようなデザイン領域を展開したいグラフィックデザイナー 駆け出しのWEBデザインビギナー に向けて、参考になれば幸いです。 はじめに：独学前の私のデザインスキル スペックまずは私のデザインスキル スペックを。 「自分のデザイン制作領域の幅を広げたい」と考えて、もともと興

          KKI DESIGN

          【WEBデザイン勉強法】ギャラリーサイトに掲載されるまでの実践ガイド

          KKI DESIGN

          デザインのインスピレーションを得られる情報サイト【現役デザイナーおすすめ５選！】

          こんにちは、 KKI DESIGNデザイナーの『ヨシダ』です！ デザインの“ひらめき”を得るために何となく情報が欲しい！ そんな時にふわっと参考にしたいサイトってありますよね。 グラフィックデザイン、ウェブデザイン、フォントデザインなど幅広い分野から、最新のトレンドや革新的なアイデアを得ることができたり、技術やデザインの進化に関する情報も豊富な おすすめサイト5選をご紹介します。 1. Photoshop VIP（フォトショップ・ブイアイピー）https://photos

          KKI DESIGN

          デザインのインスピレーションを得られる情報サイト【現役デザイナーおすすめ５選！】

          KKI DESIGN

          STUDIO vs Notion Sites WEB制作初心者のための選び方ガイド

          こんにちは、ʰᵒⁿᵈᵒ~です。 近年、ノーコードでWEBサイトを作成できるツールが急増しており、特に「STUDIO」と「Notion Sites」が注目を集めています。今回はSTUDIO Pro エキスパートとして、私たちの知見を活かし両ツールを比較しました。 特徴や長所をまとめたので、サイト制作のツール選定の参考になりますと幸いです。 Notion Sitesは最近のアップデートで採用情報サイトなどでの利用が増加し、簡単な開発や情報更新が可能です。 一方、STUDIOはデ

          KKI DESIGN

          STUDIO vs Notion Sites WEB制作初心者のための選び方ガイド

          KKI DESIGN

          STUDIOでできる！アクセシビリティ向上のための３つのこと

          みなさまこんにちは。 KKI DESIGNでSTUDIO実装を担当しているシカノです。 STUDIOユーザーの方、 STUDIOを使ってサイトを実装をしている際に、Webアクセシビリティのことをどれだけ考えて実装していますか…？ 2024年（令和6年）4月1日に「障害者差別解消法」という法律の改正が施行され、これまで民間事業者にとっては努力義務であった「合理的配慮の提供」が義務化されました。 （参照元：『政府広報オンライン』事業者による障害のある人への「合理的配慮の提供

          KKI DESIGN

          STUDIOでできる！アクセシビリティ向上のための３つのこと

          KKI DESIGN

          パッケージ受注サイトができるまで

          こんにちは。 KKIでグラフィックデザイナー・WEBディレクターをしている、はまだです。 突然ですがKKIには「パッケージ案件」の受注に特化したサイトがあります。 今回はこちらのサイトが出来るまでを、書いていきたいと思います。 これからWEBサイトを作ろうと考えている方に、ちょっとしたアイデアのヒントになれば幸いです。 サイトを作るに至った経緯KKIはパンを中心とした、食品のフィルムパッケージ製造を行っている会社です。 それまでのコーポレートサイトには事例としてデザイン

          KKI DESIGN

          パッケージ受注サイトができるまで

          KKI DESIGN

          STUDIOでこだわりの出現アニメーションを実装する！

          こんにちは！ KKI DESIGN の べりお です🐦 今回の記事では、私が実装を担当した「KKI採用サイト」の出現時アニメーションの実装方法を解説いたします✨ 先日投稿した「自社採用サイト制作の裏側」のSTUDIO実装編です！ 中でも特にこだわって調整を行った トップページのファーストビュー 職種紹介ページの吹き出し の出現時アニメーションの設定方法をお見せします！ STUDIO勉強中の方の参考になりましたら嬉しいです🙇‍♀️ トップページのファーストビュー「

          KKI DESIGN

          STUDIOでこだわりの出現アニメーションを実装する！

          KKI DESIGN

          ホームページ制作の「見積書」を読み解く

          みなさま、こんにちは！ 株式会社KKI WEBデザインチームでWEBディレクターをしている山田です。 ホームページ制作を依頼する際、まずは制作会社から見積もりを提出してもらいますが・・・ その「見積書」、分かりづらく感じたことはありませんか？ 作業項目に専門用語が多く、どんな作業なのか見当もつかない。 逆に、「ホームページ制作　一式」としか書かれておらず、内容が不透明すぎる?!　などなどお困りのことと思います。 そこで今回は、一般的に分かりづらいとされる「ホームページ制

          KKI DESIGN

          ホームページ制作の「見積書」を読み解く

          KKI DESIGN

          webサイトでよく見るホバーをSTUDIOで実装する方法

          こんにちは。KKI DESIGN てらおか⛄️です。 今日は、WEBサイトでよく見るホバーアクションをSTUDIOで実装する方法をいくつかご紹介します！ いつも同じホバーアクションをつけてしまう、透明度を変えるだけのホバーはもう飽きた！という方は参考にしてみてください。 また紹介する手順を応用することで、より複雑なモーションを設定することもできるのでぜひご活用ください！ テキストが下から出てくるアクション ヘッダーメニューでよく見るホバーアクションです。 ホバーするとテキ

          KKI DESIGN

          webサイトでよく見るホバーをSTUDIOで実装する方法

          KKI DESIGN

          自社採用サイト制作の裏側 ~デザイン編~

          こんにちは、株式会社KKI デザイナーのイワタです ㅎㅎ 今回は、私が担当した採用サイトのデザイン制作に焦点を当て、リニューアルの裏側を公開します。 （各担当者によるSTUDIO実装編と、コンテンツ設計／ワイヤーフレーム編の公開も順次予定しております 💁） 採用サイトのリニューアル過程を中心に、デザイン制作の具体的な進め方について詳しく解説します。この記事が、皆様のWEBサイト制作におけるヒントの一つとなれば幸いです。 株式会社KKIとは？弊社は、パンを中心とした食品の

          KKI DESIGN

          自社採用サイト制作の裏側 ~デザイン編~

          KKI DESIGN