データを活用したデジタルマーケティングで企業の課題・社会の課題を解決. 新潟のデジタルマーケティング・Web制作会社｜株式会社スマイルファーム. Make your business ...
スマイルファーム 新潟 - Google 検索
データを活用したデジタルマーケティングで企業の課題・社会の課題を解決. 新潟のデジタルマーケティング・Web制作会社｜株式会社スマイルファーム. Make your business ...
安達里枝（スマイルファーム）
安達里枝（あだちりえ） 株式会社スマイルファーム 代表取締役 新潟を拠点に、コンテンツ企画からWebサイト制作・運用・MA導入・SNS運用・集客まわりをワンストップで提供する総合プロデュース企業を経営。 2009年の創業時からグロースハックの手法を取り入れながら、ウェブを軸とした事業成長の支援を行っている。 近年では、ウェブ解析士として小規模事業から上場企業、自治体・観光サイトなど多様なジャンルのサイト解析を手掛けている。 WACA公認ウェブ解析士マスター公益財団法人 にいがた産業創造機構 （IT・情報化/ネットビジネス/マーケティング分野 認定専門家） 株式会社スマイルファームWebサイト：https://smile-farm.co.jp/facebookページ：https://www.facebook.com/smilefarmサイト分析123：https://analytics123
デジタルマーケティング・アクセス解析・Webサイト制作｜株式会社スマイルファーム（新潟・東京）
わたしたちはウェブアクセスログやオフラインデータなど、企業に蓄積されているデータを統合的に活用したマーケティング・サイト制作を得意としています。 データを分析した定量的な現状把握から、より成果につながる戦略・施策をご提案し、事業の成果をサポートします。
脱Bootstrap！軽量シンプルな最新CSSフレームワーク「Cutestrap」に惚れた！
もはやBootstrapがデファクトになっているCSSフレームワーク界に、ちょっとかわいい期待の新星が登場。 軽くてシンプル、すぐに使えるCutestrapのチュートリアルをいち早くお届けします。 Cutestrapは最新のCSSフレームワークです。この記事ではCutestrapの機能を紹介し、Cutestrapを使って次のような簡単な1ページのHTMLテンプレートを試しに構築してみます。 Cutestrapの特長 たいていの優れたWeb開発ボイラープレートやフレームワークと同様、Cutestrapは開発時間を短縮し、繰り返しタスクを削減します。ドキュメントページのキャッチコピーによると、Tyler ChildsのCutestrapは「小粋（sassy）でしっかり主張するCSSフレームワーク。Bootstrapの小さなかわいい（tiny）交代選手」とのことです。Webサイトとアプリのクイッ
もう試した？無料で使えるUIデザインツールAdobe XDにアドビの本気度を見た！
モバイルアプリのUIデザインといえばSketchを使っているデザイナーが多いようですが、アドビがこの春リリースした「Adobe XD」もすごい勢いで追いつこうとしています。特に効率化のための機能は必見です。 アドビがようやくユーザーインターフェイス専用のデザインツール（Adobe Experience Design：Adobe XD）を作り、Sketchに対抗すると決めたものの、多くのデザイナーは両者が同じ土俵に上がって競い合うまでにどれくらいかかるか、疑問に感じています。 それには、ドラッグ＆ドロップで画像やテキストを配置する、Adobe XDのアセットインポート機能を自身の目で見て確かめるのがよいでしょう。Adobe XDは現時点ではMacにのみ対応していますが、近いうちにWindowsでも利用可能になります。 以下がアセットインポートの典型的な方法です。 「Save As」→「Fil
CSSライクでデザイナーに優しい！anime.jsはDOMアニメーションの新定番だ！
Webアニメーションの実装方法として海外でいまもっとも話題なのが、anime.jsでしょう。日本の「アニメ」が語源の注目のDOMアニメーションライブラリーの使い方を詳しく。 もし速くて軽いアニメーションのライブラリーを探しているなら、Julian Garnierが考案したanime.jsを検討してみてはどうでしょうか。 この記事は、SVG画像を含む動的なDOMアニメーションに関する解説です。記事では、canvas-WebGLやSVGに特化したアニメーションライブラリーに触れるつもりはありません。ただし、WebページのHTML要素（理想的にはSVG画像も）のアニメーションに適していれば、別の機会に紹介するかもしれません。 記事の目的はライブラリーを分析してコードを掘り下げることではありません。主にCSSを使う人が、DOMのアニメーションのためにJavaScriptでなにができるかを追及する、
Webデザインでよく使うUI要素の名称・用語一覧 - Qiita
Overview Webサイトを作っているとよく出てくるUIの名称を、ざっくばらんにまとめました。 人や会社ごとで固有の呼び方があると思いますが、私の場合こんな感じです。 コミュニケーション円滑にな〜れ ※2016/11/28 はてブコメントなど参照させていただき、少し更新しました。 ポップアップ表示系 ▼ アラート JSのalertかブラウザのデフォルト機能で出るやつ。ダイアログとも。 ▼ モーダル・モーダルウィンドウ 閲覧中のページにカバーを重ねて表示させるやつ。 modalは「このページはいま入力モードだぜ」といった意味合いでmodeを形容詞化したことば。 ▼ ツールチップ・ポップアップ表示 マウスオーバーすると吹き出しとかで表示されるUI。 補足説明などで使用されることが多い。 ▼ ポップアップウィンドウ 閲覧中のウィンドウとは別に、勝手に立ち上がるウィンドウ。 スパイウェアなどの
Reactデザインパターン - すべてがeになる - Qiita
次期プロダクトでReact.jsを使ってみようと思っていて、その設計をどうすれば良いのかと試行錯誤した結果、それなりにイケてる結論に辿り着いたので、そのメモ書きです。 作ってみれば、Fluxとはこういうことか！というのがわかります。(若干アレンジはされてると思うけど。) それまで漠然と「ふーん、なるほどね。。」みたいな感じでなんとなくしか理解してなかったFluxが実は超画期的なパラダイムシフトであったことに気がついて結構衝撃を受けています。(^^; ちなみにプログラミングの文脈でeと言ったらまず思いつくのがEventかExceptionのどちらかだと思うけど、この場合はもちろんEventのことです。 すべてがExceptionになるのなら、即刻使うのを止めた方が良い。(^^; Fluxとは Fluxの説明では必ずと言って良いほど参照される図なので見たことある人も多いと思うけど、こういうアー
JointJS - 多彩な図を描けるJavaScriptライブラリ
MOONGIFTはオープンソース・ソフトウェアを紹介するブログです。2021年07月16日で更新停止しました Web上での表現力を向上させるためのライブラリが多数存在します。多くはグラフを描くものであったり、より複雑なチャートを描くものです。さらにWebGLを使ったり、Canvasに複雑な描画を行うものもあります。 今回紹介するJointJSはCanvas上に図形を描くのですが、JavaScriptと連携したインタラクティブな図を描けます。 JointJSの使い方 デモです。まずは回転する図形。 こんな図形も描けます。なお、緑と赤のポイントはドラッグでラインを接続できます。 各オブジェクトはマウスでドラッグできます。 図はグルーピングされていたり、コネクトされている場合は線も一緒に動きます。 デモです。赤いポイントがアニメーションしています。 パイチャートともちょっと違う図形です。 各要素
Googleも推奨！アニメーションライブラリTweenMaxの使い方 入門編 — un-Tech
ごきげんよう。フーミンです。 「JavaScriptでアニメーション作るならTweenMaxが最強だよ」と先輩から教わり早2年。いまだ現役最強（僕の中で）JavaScriptアニメーションライブラリTweenMaxの良さを広めるために、入門編・応用編の全2回に分けてご紹介しようと思います。 TweenMaxとは TweenMaxとは、GreenSock社が開発した超高性能アニメーションプラットフォーム「GSAP」のひとつで、DOMアニメーションに特化したJavaScriptライブラリです。 requestAnimationFrameを使用しているため、jQueryのanimateメソッドを使うより、動作が高速かつ安定しています。 同じようなライブラリにmokichiくんが紹介してくれたVelocity.jsというのもあります。 TweenMaxと同様に動作が高速かつ安定しており、jQuer
GreenSock – 高速なHTML5アニメーションライブラリ
MOONGIFTはオープンソース・ソフトウェアを紹介するブログです。2021年07月16日で更新停止しました HTML5によってかつてFlashが行っていた領域がJavaScript/CSS3によって実現されています。その一つにアニメーションがあります。これまでFlashバナーなどで提供されていたアニメーションが、Web標準の技術だけで行えるようになっています。 とはいえ、できるようになったと言ってもやり方は簡単ではありません。そのためには専用ライブラリがあった方がいいでしょう。そこで今回はGreenSockを紹介します。 GreenSockの使い方 GreenSockの紹介動画です。 これまでFlashでやっていたようなアニメーションが実現できています。 GreenSockが作り出すアニメーションはFlashと遜色ないのではないでしょうか。もちろんJavaScirptと連携させてつかうこ
【Web】オープンで超絶なBlueGriffonというWYSIWYGエディタ - 鍋風呂
追記：3/20 見た目でウェブ編集が出来るWYSIWYGエディタは、有りそうで、あんまり世の中に存在してません。 一時のホームページブームが去っていくと共に、いまやAdobe社のDreamweaver がほぼ独占状態となってます。 むろん、オープンソース界隈でも、いくつかプロジェクトがあり期待が集まりましたが、どうにも停滞しては、ほぼ死滅状態が続いていました。 ふと調べてみたら、BlueGriffonが2015年10月に更新してるではありませんかッ！！ Geckoエンジンを搭載したシンプルなエディタでしたが、ずっと、しばらく前から更新が止まり、簡単なCSSを組み入れたページすら正常に表示されない状態でした。 絶賛開発中止のMicrosoft社のExpressionWebですら、正常に表示されないページでも・・。 現在、無料公開中。かつては、３万円程度のソフトでした。 最新版BlueGrif
HTML5アニメーションを簡単に作成できるツール「Google Web Designer」＆「HTML5 MAKER」｜BLACKFLAG
Webページ上にアニメーション演出を組み込もうとする場合、 今ではJavaScript（jQuery）やCSS3など、実装方法がいくつかありますが HTML5でのアニメーション動作を簡単に作成することができる 気になる便利ツールが2点ほどあったので自分用メモとして紹介してみます。 Google Web Designer 言わずと知れたGoogleさんから公開している HTML5アニメーションをつけた広告を制作できるツール「Google Web Designer」。 ツールは無料でダウンロードすることができます。 この「Google Web Designer」では広告バナーのみならず 画像ギャラリーなども簡単に作れるようになっており 操作も直感的に制作できるようになっています。 作成したデータは一式ダウンロードすることができ 組み込みも簡単にできます。 試しに作成してみたサンプルはこちら。
複雑なコードは不要！簡単に使えるHTML/CSSジェネレーター22選
今回はWeb制作で役立つHTML/CSSを生成してくれるジェネレーターを紹介します。 CSS3の登場でより高度なアニメーションや表現ができるようになりました。一方、CSS3のコードは複雑になりがちでプロパティの使い方を覚えるのも大変です。 ジェネレーターはリアルタイムでデザインを確認できたり、GUIで簡単にデザインを調整できたりします。より効率的なWeb制作を行うために、ぜひ活用してみてください。 WAIT! Animate http://waitanimate.eggbox.io/#/ CSSのループアニメーションで遅延を挿入するのは簡単ではありません。こちらのサービスでは一時停止機能をもったループアニメーションのコードを生成してくれます。いくつかの主要なアニメーションのテンプレートが提供されており、さらにカスタマイズも可能です。 Stylie http://jeremyckahn.gi
Adobe Animate CCでサクっとHTML5+JavaScriptアニメーション！
こんにちは。制作部の平尾です。 私は2〜3年前くらいまでFlashがメインでお仕事していたのですが、最近はスマホのお仕事が多いので、新しく生まれ変わったAnimateはまったく触っていませんでした。久しぶりにAnimateを使って、HTML5+JacvaScriptのアニメーションを作ってみたらいい感じだったので、簡単にサンプルを使ってご紹介したいと思います。 サンプルの完成イメージはこんな感じです。このアニメーションをAnimateで作成して、HTML5 Canvasにポチっとしてみようと思います。 ※注：この画像↑はgifです。 1. Animateでアニメーションをつくるシンボル内でON/OFFの顔を切り替えていて、さらにステージ上でもアニメーションさせる二重構造になっています。今回はサンプルなので、簡単にモーションプリセットでアニメーションさせてみました。 2. パブリッシュ →
第16回 HTML5で日報アプリを作る ツール編［2］ CSSメタ言語でスタイルの記述を高度化する
第15回からは、業務アプリケーションのような機能・仕組みを持ったサンプルアプリケーションを例に、これまで紹介してきたHTML5の機能や開発のためのツールをどう使っていくか説明しています。 第15回 HTML5で日報アプリを作る ツール編［1］ 開発者ツールで生産性を向上する Style記述の高度化: Less/Sass/Stylus 見栄えが良い画面やアニメーションなど動きのある画面など、画面のレイアウトが複雑になっていくと、CSSの記述量が増えてしまい、以下のような問題が起こりやすくなります。 HTMLの構造が複雑になったときにセレクターを書き直す必要がある 変数での参照ができないため、似たようなスタイルの使い回しはコピー・アンド・ペーストになってしまい修正されると、他の場所も修正すべきかを全て確認する必要がある これらの問題を解消するために、他のCSSフレームワークを使うこともできます
Webページを作成する時の基本になるHTML5の最小限構成やリセット用CSS、CSS3アニメーションなどのまとめ
Webページ作成のベースになる、HTML5の必要最小限の構成にしたテンプレート、各ブラウザのスタイルを正常化・リセットするスタイルシート、レスポンシブ対応の柔軟なグリッドをつくるスタイルシート、さまざまなCSS3アニメーションを簡単に利用できるスタイルシートを紹介します。 HTML5で作成する時の必要最小限のテンプレート スタイルの正常化・リセット グリッドをつくるスタイルシート CSS3アニメーション HTML5で作成する時の必要最小限のテンプレート まずは、HTML5でWebページを作成する時にのシンプルなブランクのテンプレート。 A Generic HTML5 Template -GitHub ライセンスはCC0 1.0で、個人でも商用でもクライアントの案件でも無料で利用できます。利用する際に、許可やコピーライトの明記などは必要ありません。 テンプレートはIE9や8以下への最低限の配
p5.js
p5.js is a friendly tool for learning to code and make art. It is a free and open-source JavaScript library built by an inclusive, nurturing community. p5.js welcomes artists, designers, beginners, educators, and anyone else! Lauren Lee McCarthy reading the Processing Community Catalog. Photo credit: Maximo Xtravaganza. Coding Club for people aged 50+ in Korea, led by Inhwa Yeom. Qianqian Ye intro
Web制作のクオリティを飛躍的に高めるJavaScriptライブラリ10選を一挙公開！ - paiza times
どうも、まさとらん（@0310lan）です。 みなさんは、「JavaScriptライブラリ」を活用しているでしょうか？ Webサイト制作はもちろんのこと、さまざまなWebアプリやサービスなどを開発する時に、大幅な時間短縮やクオリティを飛躍的にアップすることが出来るようになります。 そこで今回は、国内外で人気が高くて誰でも簡単に扱える「JavaScriptライブラリ」を厳選してご紹介しようと思います！ ■多機能な「写真ギャラリー」を組み込めるライブラリ！ ◆1.Viewer.js 複数の画像を表示する際に、オシャレな「ギャラリー風」に変換してくれるライブラリです。 類似のライブラリはいくつか存在しますが、「Viewer.js」は使い方が非常にシンプルで扱いやすいのに、多機能性も備えているスグレモノとなっています。 基本的な使い方としては、HTMLファイルに表示させたい画像を「リスト要素」で指
Canvasアニメーションの要点 - Qiita
はじめに いまさらですがHTML5 Canvasの勉強をはじめました。 Canvas APIを使ったアニメーションの実装は、jQuery animate()やcss3 keyframesといったものとは考え方が異なります。はじめて調べた時には結構戸惑ったので、同じような方のためにメモしたいと思います。 アニメーション = 再描画 Canvasでは便利なアニメーションメソッドはなく、単純に描画自体を繰り返すことでアニメーションを実現させます。イメージとしては、パラパラまんがのように画面自体が次々と差し替わっていくようなものでしょうか。 アニメーションサンプル なお↓ページで実際の動きを確認できます http://nekoneko-wanwan.github.io/demo/canvas/animation/ Canvasアニメーションの手順 ざっくりと以下のような流れになります 要素を削除
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
