Wiz（ワイズ）のクリエイターが記事を書いています。現場ならではの声をお届けします！ ▶︎https://note.com/wiz_creative/
サムネイル画像クリックで大きな画像を表示する機能を実装したかったので調べたところ、STUDIOでも「Toggle機能」にてできるようなので下記記事参考に試してみることにしました。 レイアウトを決めるLP内の製品情報の左隣にサムネイル画像クリックで大きな画像を表示する機能（以下、サムネ大表示）を実装しようと思います。 完成先に完成したものを公開します。 構成が自分には少し複雑だったので、そこを理解してから作成することにしました。 まず親Toggleボックスを作成し、その
テンプレのデザインができたのでstudioで制作していきます。 テンプレにする際の注意点注意点としてテンプレなので誰が利用しても使いやすく、尚且つクオリティが担保されるような作りにしたいと思います。 例えば、メインビジュアルに設置したPOINT項目はサービスによってはない場合もあるので、ない場合のレイアウトも考慮しながら作ります。 気持ちいいアニメーションを目指すチャット風のよくあるお悩みセクションは、スクロールアニメーションを入れることでチャットの雰囲気を出しました。
前回ワイヤーの準備ができたので、今回はfigmaでデザインをします。 直接STUDIOでデザインすることもできますが、まずデザインツールにて作成し、デザイン内容やサイズ感の概要を把握してからからSTUDIOに入ることを推奨します。 デザインするテンプレですが架空の商品を想定して作成していきます。今回はWi-Fi機器販売用LPとして作成。 メインビジュアルは訴求コピーと、サービスの特徴でまとめます。 課題セクションはユーザー課題とよくある質問を掛け合わせたデザインにしま
ノーコードツールSTUDIOにて、実用性を兼ねたランディングページ（LP）のテンプレを考えていきたいと思います。 はじめにLPの一般的な必要な要素を洗い出します。 メインビジュアル 悩み・問題提起 導入事例 サービス紹介・特徴 CTA フォーム ご利用の流れ よくある質問 キャンペーン（バナーでもOK） 料金表 比較表 機能一覧表 また、今回のテンプレは仮の商材として「Wi-Fi機器販売サービス」を題材としてあげ作成していきます。 ワイヤー作成必
ノーコードツールSTUDIOのCMS作成を行ったのでメモとして残します。 1.モデルを作成してみるSTUDIOのホーム画面のタブ「CMS」を選択し、モデルを作成します。 今回は記事をデザインしようと思うので、「記事タイプ」を選んで作成します。 2.記事内容やカバー画像挿入記事作成画面に移り、記事タイトルと記事内容を入れます。記事内容はカバー（サムネイル）が必要な場合は右側にあるプロパティから画像も挿入します。 記事を複数作りました。ただ、デフォルトでは公開されてない下
今回は以前作成したロゴデザインを紹介したいと思います。作成する過程や考え方など書き残していこうと思います。 概要 M＆Aサービスのロゴマークデザイン。アプリ開発しているので主にアプリのロゴマークとして利用。 コンセプトの用意 今回は幅広いターゲット層を想定し、コンセプトを作成します。 1.ターゲット 企業やサービスのオーナー（30代〜60代） 2.ターゲットに与えるべき印象 堅実な取引（M＆A）が可能。しかもスマホで手軽にできる。 3.キーワード 堅実、手軽、マ
最近作成したバナーデザインの紹介と作成する時の考え方をメモしていこうと思います。 概要 インターネットと引っ越しの申し込みができるサービスサイトへの遷移バナー https://net.hikkoshi-navi.jp/ 訴求 まずは訴求ポイントを洗い出してみます。 キャッシュバック70,000円 引越し手続きとインターネット設定をプロがまるごとサポート 引越し手続きとインターネット申し込みをサイトから簡単に申し込める 今回はこの3点の訴求をもとに作成していきま
今回のテーマ 「パンくず」 デザインを考える上でのポイント 存在を強調しすぎない 押しやすさにも配慮 階層を明確に伝える 自分のデザイン 情報をシンプルに、必要に応じて展開するパンくず パンくずを利用してページ移動するユーザーは多いと思いますが、階層が深くなると、情報過多になりやすいコンテンツとなってしまいます。今回はそれを防ぐためのデザインにしました。 ホバー展開前は、矢印の数で階層を把握しつつ、情報を最小限に抑えたデザインに、展開時はページ移動を目的とした
前回に引き続き新しいUIは無いか、考えてみることにします。 ちなみにテーマは「Daily UI」の課題を参考にさせてもらってます。 今回のテーマ 「カウントダウンタイマー」デザインを考える上でのポイント タイマーをよく利用する人はどんな人か 利用する人は画面を注視してるわけではない 感覚で伝えるだけでは足りない、数字で明確に伝える必要あり タイマーを利用する人は誰か？と考えると、料理をする主婦やトレーニングをする人などが挙げられます。 そこで、「料理ができた！」「
近年、定番化してきたWEBサイトのUIUX。 デザインする時は、とりあえず「型」に嵌め込んでおけば間違いないと思っていませんか？ もちろん間違いではないですが、デザインを考えることを止めてしまうのは勿体無いと思います。 そこで「新しい型」がないか、自分で模索してみることにしました。 今回のテーマ 「メッセージ削除のポップアップ」デザインを考える上でのポイント 明確に伝えるため、シンプルで分かりやすいコピーワークが求められる。 削除意識が高い人がこのポップアップ画面に到
