サクサク読めて、アプリ限定の機能も多数!
トップへ戻る
ノーベル賞
www.boel.co.jp
従来のフォーム機能開発というと、さまざまな仕様の検討をする必要がありました。ウェブサーバ・メールサーバはもちろんのこと、送信データを蓄積するならDBも必要です。 それらの構築やメンテナンスを考えると、費用やセキュリティの観点から敷居が高いと感じる方も多いのではないでしょうか。 今回は「サーバーレス」をテーマに、クラウド型メール配信サービス「SendGrid」、ヘッドレスCMS「microCMS」を使った省コストなフォーム機能の実装手順を説明します。
従来のCMSはコンテンツを入稿する「システム」とコンテンツを表示する「ビュー」が合わさったものでした。 ヘッドレスの「ヘッド」とは、「ビュー」を指します。「ヘッドレス」なので、ビューの無いCMSということになります。 内容を管理するバックエンドの機能だけを持ち、見た目を決めるテーマやCSSなどは持たないCMSがヘッドレスCMSです。 CMSによってデザインやレイアウトが固定されないことで、フロントエンドの自由度が格段に高くなります。 たとえば、企業サイトで「新着情報」のみをブログのように管理し、「企業概要」や「サービス」といったページは頻繁には更新しないケースがあるとします。 Wordpressでは、更新のないものも全て「固定ページ」としてWordpress上で管理する必要がありました。 ヘッドレスCMSなら、必要なところだけでCMSを使い、他のページはCMSの制約なく制作することが可能で
Vue.js(ヴュー ジェイエス)はWebページのUI(ユーザーインタフェイス)作成にフォーカスしたJavaScriptフレームワークです。直感的に開発でき、導入や習熟のしやすさ、日本語ドキュメントが充実していることが特徴です。 Vue.js公式サイト Nuxt.js(ナクスト ジェイエス)は、Vue.jsベースのJavaScriptのフレームワークで、UIに特化しているVue.jsに加えて、Webページ構築に有用なUI以外の機能(Ajaxやサーバーサイドレンダリングなど)などををまとめて利用できる環境を提供してくれます。 Nuxt.js公式サイト Todoリストを作ることによって、Vue.jsのデータバインディング※1※1データバインディングとは、データと対象を結びつけ、データあるいは対象の変更を暗示的にもう一方の変更へ反映すること、それを実現する仕組みのことをさす。の仕組みや、Nuxt
Shopifyは、世界中で100万以上の企業で利用されているSaaS型のECプラットフォームです。従来抱えていた問題である、時間、コスト、煩雑さを解決した画期的なシステムとして注目されています。最近では日経新聞(2020/1/31)でも取り上げられ、とても話題になりました。 Shopify app storeには、何千ものアプリが世界中で公開されており、様々なカスタマイズが可能になっています。アプリには、API※1※1APIとは、ソフトウェアからOSの機能を利用するための仕様またはインターフェースの総称。アプリケーションの開発を容易にするためのソフトウェア資源のことをさす。からアクセスするプライベートアプリと管理画面に埋め込むアプリが用意されています。今回は、管理画面に埋め込むアプリを作っていきます。埋め込みアプリを構築することができると、Shopify app storeに公開できるアプ
・マウスでのクリックと比べ、機能の実行が短時間で可能な場合が多い。 ・キーボードから手を離してマウスに持ち替える必要がないので、文書の編集を行っている場合などにも、効率よく作業を行うことができる。 キーボードショートカットを使うには、1つまたは複数の修飾キーを同時に押します。 たとえば、「command+C」(コピー)を使う場合は、「command」キーを押しながら「C」キーを押した後、両方のキーを同時に離します。 Macはメニューを開くと、キーボードショートカットが併記されていて、わざわざ調べなくても様々なキーボードショートカットがその場で確認できます。 ・確認の手順 1.画面左上のメニューバーのアップルのマークをクリック 2.システム環境設定 3.ショートカット しかし、Macに慣れていないと、キーボードショートカットを覚える以前の問題として、装飾キーの記号の意味が分からなくて、せっか
schema.orgを設定してクリック率UP!JSON-LDの記述方法の基本今回はBOELのWebサイトを例にあげて、サイトのクリック率に関わる、schema.orgのに基づいた構造化データのマークアップ方法をご紹介します。 みなさんは、レストランの名前を検索したときに、検索画面の右側にそのお店の営業時間や、住所、地図などの情報が表示されているのを見たことがありませんか? 検索結果に出てきたサイトのタイトル下に、レストランの評価の星マークや料理の価格帯が表示されているのを見たこともあるのではないでしょうか。 Googleでは、検索結果に表示されたサイトの情報を集め、ページ右側のナレッジパネルや、リッチスニペットと呼ばれる、基本情報以外の+αの情報を表示しています。 画像や動画が表示されて目につきやすかったり、レビューが気になってサイトをついついクリックしたくなります。 この+αの情報は、s
Webサイトにおいて、アニメーションの効果はサイトのイメージ向上や平面では表現できない印象をユーザーに届けます。 Webサイトの制作において、エンジニアとデザイナーの意識の合わせ方や調整の仕方など工夫が必要かと思います。 あらかじめこういうサイトを目指しているなどアニメーションの共有ができていれば…と感じることがしばしばあります。 それでは各アニメーションの特徴を合わせてみていきましょう。
2018 Webデザイントレンド予想 10選2017年は、グラデーションカラーの使用やアニメーション、インタラクションの導入などがWebサイトデザイン上で一般的に浸透しました。 今回は2017年の流行を踏まえ、2018年のトレンド予想をご紹介します。
<div class="tab_wrap"> <input id="tab1" type="radio" name="tab_btn" checked> <input id="tab2" type="radio" name="tab_btn"> <input id="tab3" type="radio" name="tab_btn"> <div class="tab_area"> <label class="tab1_label" for="tab1">tab1</label> <label class="tab2_label" for="tab2">tab2</label> <label class="tab3_label" for="tab3">tab3</label> </div> <div class="panel_area"> <div id="panel1" class="ta
Flexboxの仕様と柔軟なボックスレイアウトWebサイトのコーディングで頭を悩ませる、上下中央揃えや、要素の高さを合わせるなどのボックスレイアウトを「Flexbox」の導入で解決しようという方が多いかと思います。今回はプロパティやベンダープレフィックスなど、“今”使うためのFlexboxの対応状況、記述についてご紹介します。 Flexboxは、Flexコンテナ(親要素)とFlexアイテム(子要素)で構成されています。 親要素にdisplay:flexを設定することによって、flexコンテナ、その子要素をFlexアイテムとされます。 Flexboxは正式にはFlexible Box Layout Moduleといい、ボックスレイアウトを柔軟にする新しいCSSのレイアウトモードです。 Flexbox自体は2009年にdisplay:box、それ以降にはdisplay:flexboxという形が
node.jsアプリをLinuxサーバーで公開してみよう「Express」をnode.jsと一緒にインストールし設定、構築し、現在動作しているNginxに追加で組み込むような形で進めていきます。 ※サーバーOS:CentOS7 Webサーバー:Nginx 1.11.3
線や塗りなど描画が美しいSVGアニメーションの作り方ロゴやアイコンなどをWebサイトで拡大・縮小しても劣化させたくない場合に使用されるSVG画像。SVGには、gifのように画像をアニメーションさせることができ、gifに比べて滑らかな動きを表現できます。今回はXML形式とCSS3でアニメーションをつけて、ロゴやアイコン、図形などをリッチに見せる方法をサンプル解説とともにご紹介します。
UXに貢献。マイクロインタラクション10選今回は、Webサイトの品質を高めるためにぜひこだわってみたい、マイクロインタラクションについてご紹介します。Googleが推奨するマテリアルデザインの出現によって、マイクロインタラクションを用いたWebサイトをよく見かけるようになりました。操作していて気持ちの良いWebコンテンツには、細部にマイクロインタラクションが使われています。 Dan Saffer氏の著書「マイクロインタラクション ー UI/UXデザインの神が宿る細部」によると、マイクロインタラクションについて以下のような記載があります。 マイクロインタラクションとは、単一のシナリオに基づいてひとつの作業だけをこなす最小単位のインタラクションのことです。 マイクロインタラクションを言葉通りに解釈するとは「細部のやり取り」と言えるでしょう。 ではマイクロインタラクションは実際にどんなことができ
srcsetで画像をレスポンシブやRetinaディスプレイに最適化Web上で、その状況に対応した画像に自由に切り替えることができるsrcset。 今回は、画面解像度やウィンドウサイズによって最適な画像に切り替える方法と、srcsetの主なプロパティなど実際のコーディングにすぐ使えるサンプルを解説とともにまとめています。
下の図を見ると、imageAははっきり表示されていますが、imageBはぼやけています。 高解像度のRetinaディスプレイを搭載したデバイスが広く普及し、Webデザインの現場では高解像度ディスプレイにも耐えられる画像の作成が必須となっています。 その対応策として、さまざまなスクリーンサイズへの対応に適したSVGが注目されるようになりました。 高解像度のRetinaディスプレイ※1※1Retinaディスプレイとは、Apple製品に搭載されているディスプレイの呼称のことをさす。を搭載したデバイスが広く普及し、Webデザインの現場では高解像度ディスプレイにも耐えられる画像の作成が必須となっています。 その対応策として、さまざまなスクリーンサイズへの対応に適したSVGが注目されるようになりました。 SVG自体は1998年頃に開発されていましたが、Internet Explorerで標準対応されて
Webサイトに訪れたとき一番最初に大画面で見られるイメージ画像はヒーロー画像と呼ばれています。静止画で作成するヒーロー画像・コピーを組み合わせて、ブランドのイメージを印象付けるものです。 そのヒーロー部分を動画に置き換え、サイトトップに背景として動画を取り入れたWebサイトが増えており、全画面の映像で強い印象を与えています。 実装方法がFlashからJavaScriptに切り替わったことで音声を流すことができるようになったこともあり、積極的に音楽や音声を取り入れたWebサイトが増えています。またナビゲーションなどに使われる、UI・UXサウンドを用いるWebサイトもあります。 スマホやアプリなどで主流のUI・UXサウンドですが、シンボリックに使うことで、よりブランドを際立たせる効果があります。Webサイトのテイストに沿った音を取り入れ、ブランドを目に訴求するだけでなく耳にも訴求し、印象的によ
すぐに使える!アコーディオンメニューの実装スマートフォンなど限られたUIの範囲に開閉(表示/非表示)を切り替えることで多数の項目を一覧したいときに便利なアコーディオンメニュー。 今回はWebページでよくみかけるアコーディオンメニューをjQuery実装していきます。
生成AIと歩む、新しい音楽の時代近年、音楽業界において生成AIが注目を集めています。 今回は、音楽における具体的な活用事例と、また、生成AIが音楽にどのような未来をもたらすのかについてお話しします。 2024.8.30
フレームアニメーションで複数の要素を動かす場合はフレームごとに動きを描く必要がありました。そのためレイヤーが膨大な量になり、管理が大変でした。 しかしビデオタイムラインでは要素ごとにスマートオブジェクト※1※1スマートオブジェクトとは、PhotoshopやIllustrator ファイルなどのラスター画像やベクトル画像からの画像データを含むレイヤーのことをさす。に変換できるようになり、一目で動きを確認できるようになりました。 またスマートオブジェクトのため、レイヤーの情報を保つことができます。 ビデオタイムラインに変換してもフレームアニメーションに変換して画像を編集できます。 ※1 スマートオブジェクトとは、PhotoshopやIllustrator ファイルなどのラスター画像やベクトル画像からの画像データを含むレイヤーのことをさす。
メジャーアップデート!高速化したjQuery3.0の特徴jQueryがリリースされました。2.x系からのメジャーアップデートで、マイナーアップデートにはない大きな変更を伴います。今回はアップデートによる変更点に関連して大きな影響が懸念されている箇所のポイントと、使われているAPIの変更、修正方法をご紹介します。 今までjQueryは後方互換を優先度の高い事項として開発されていました。 新しいjQuery3.0は軽量化、高速化をコンセプトにして開発が進められているため処理の高速化が図られている他、軽量化を軸としたバージョンが新たにリリースされています。 また、モバイルのアニメーション描画を改善するための「requestAnimationFrame」がAPIをサポートしているブラウザで利用可能となりました。 今回のjQuery3.0では通常版の他に、機能を制限し軽量化したスリムビルド版が同時に
ハンバーガーボタン実装で学ぶJSの基礎主にスマートフォンデバイスなどのUIでよくみられるようになった三本線「三」のメニューボタン。海外でハンバーガーに見えることからハンバーガーメニューとか、ハンバーガーボタン・ナビゲーションと呼ばれています。今回は、ハンバーガーボタンをもとにJavaScriptの基礎をご紹介します。 ◎ 長所 メニューの内容をWebサイト上に表示させなくとも、コンテンツリンクを実装できるハンバーガーボタンは、画面の表示領域を広くもつことができます。 そのため、ゆったりとしたデザインや大胆なレイアウトをスマートフォンでもできることが魅力です。 △ 短所 コンテンツリンクを押すためにひとつ動作が増えたことから、 ユーザーエンゲージメント※1※1 エンゲージメントとは、企業や商品、ブランドなどに対してユーザーが「愛着を持っている」状態のこと。 、つまりユーザーがサイトのゴールに
現在SNS(ソーシャルネットワーキングサービス)は世界中で利用されています。 最近では、宣伝のためにSNSを利用する企業が増えています。 当社もtumblrを利用し、自社コンテンツの宣伝やオフィスの雰囲気が伝わるよう社内で起きた出来事を更新しています。 代表的なSNSはTwitter、Facebook、google+、Pinterest、tumblrなどたくさんあります。 なかでも「tumblr」は他のSNSと比べ、サイトのデザインを自由にカスタマイズできるので、自分のイメージに合ったサイトにすることができるのをご存知でしたか? Tumblrは一般的なブログ機能であるテキスト、画像の投稿だけでなく他サイトからの引用や、音声、動画などが投稿できます。 また、他ブログを自分のブログに表示する「リブログ」や相手のブログを評価し、評価したことを自分のブログに表示する「スキ!」の登録により、情報が拡
WE ARE BOEL Inc.,BRANDING & DESIGN FIRM BASED IN TOKYO JAPAN.BOEL Inc.は東京を拠点に活動する ブランディング&デザインファームです。 ブランディングからグラフィックデザインまで、 細部にこだわり、心地よく一貫性のある 顧客体験の提供をお手伝いします。 VIEW MORE
このページを最初にブックマークしてみませんか?
『BOEL Inc. | ブランディング&デザインファーム』の新着エントリーを見る
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く