はてなブックマーク

こんにちは、SINAPの久保田です。最近、会社のチーム予算で、気になっていた書籍『実例付き フォント字典』を購入したので、その感想とWebでのフォントついて書いてみようと思います。普段からWeb制作に携わっている方々には当たり前のことかもしれませんが、そうではない方向けに書きますので「Webでの表示ってどうなっているの？？」という疑問をお持ちの方などは参考にしていただけると幸いです！ 書籍「実例付き フォント字典」の概要と感想 出版元のパイインターナショナルさんの紹介にも書かれている通り、「使用イメージがわかる実例作品付きフォント見本帳」で、フォントベンダー21社の和文書体1768種が収録されたフォント見本帳です。 本の中身は、出版社のwebサイトで閲覧できます。 実例付きフォント字典 / PIE International + PIE BOOKS フォントは会社ごとにパッケージで購入する

こんにちは、野原です。 「スマートフォンの入力フォーム最適化」、前回は、離脱理由の仮説を裏付けるために取得すべきデータをご紹介しました。今回はその中からいくつかピックアップして実際にどう取得するか、その数値をどのように考えるかについてみていきます。 Googleアナリティクスを使った取得方法を主にご紹介しますので、導入しているサイトであることを前提に進めていきます。ご了承ください。 ※Googleアナリティクスは、Google社が無料で提供するWebページのアクセス解析サービスです。 では、早速はじめましょう。 第4回：目次 ・Googleアナリティクスの直帰率と離脱率について考える ・イベントトラッキングを使ってどの項目まで進んだかを調べる ・まとめ <スマホ入力フォーム最適化 連載> 第1回スマホEFO：「スマホ入力フォーム最適化を始めよう！」 第2回スマホEFO：「入力フォーム最適化

こんにちは、内藤です。 モバイルフレンドリーの連載、第4回目です。第3回を前編後編にしようと思っていたのですが、またしても長くなってしまい、さらには前編中編後編という構成でも収まりきらなくなってしまったので、普通に回を重ねることにしました。過去の記事も含め、今までの連載予定を更新しているので、今後の予定が気になる方がいらっしゃったらご確認ください。 前回に引き続き、"記事が読まれること"を主目的としているサイトを30ほどピックアップして調査を行った結果のレビューと考察をしていきたいと思います。今回は、メディア系サイトを設計している方なら1度は検討したことがあるであろうトピック「「続きを読む」を実装するかどうかについてです。 それでは第4回、いってみましょう。 <SINAP モバイルフレンドリー対応 連載> 第1回：「スマホで読まれる文章とは？」 第2回：「GoogleとAppleの推奨フォ

こんにちはシナップ大川です。 最近なにかと話題にあがるIoT（Internet of Things）ですが、その対象は家電のような身の回りの小さな事から、家や建物、地域などありとあらゆる分野におよび、話題だけが先行して捉えきれないのも事実です。 そこで今月から「IoTアンテナ（世界のIoT事例やニュース、話題など）」と題して、IoTの事例やホットな話題を毎月集めてみたいと思います。 <シナップのおすすめIoT記事> IoT向けクラウド揃い踏み 2015年11月IoT事例&ニュース よくわかるIoTの仕組み 「モノ」とインターネットを接続するには よくわかるIoTの仕組み 基本的な構成要素とデバイスの役割 第4次産業革命が到来？！ そもそもIoTって何だろう？ その他のIoT記事をもっと見る 「IoTといってもまだちょっと先の話でしょ?」と思っているそこのあなた！ 実はもうすぐそこまできてい

こんにちは、内藤です。 モバイルフレンドリーの連載、第3回目です。前回、GoogleとAppleの推奨するフォントサイズについてご紹介しました。では実際、世の中のサイトはどのくらいのフォントサイズを設定しているのでしょうか。今回、"記事が読まれること"を主目的としているサイトを30ほどピックアップして、各サイトのフォントサイズ、文章量について調べてみました。 また設計時に判断の迷う、「ページ分割」についてもリサーチしてみたので合わせてご覧ください。 <SINAP モバイルフレンドリー対応 連載> 第1回：「スマホで読まれる文章とは？」 第2回：「GoogleとAppleの推奨フォントは？」 第3回：「スマホサイトで指定すべき最適なフォントサイズとは？」 第4回：「スマホサイトの「続きを読む」は必要か？」 第5回：「スマホで読まれる文字数は？」 第6回：「記事をページ分割するメリット・デメリ

こんにちは、内藤です。 モバイルフレンドリー対応の連載、第2回目です。今回は、GoogleとAppleの推奨するフォントについて調べたので、それをお伝えしたいと思います！ とはいえ、ウェブ制作をされている方ならご存知の方は多いと思いますので、今回はさらっとおさらいしていただければと思います。 <SINAP モバイルフレンドリー対応 連載> 第1回：「スマホで読まれる文章とは？」 第2回：「GoogleとAppleの推奨フォントは？」 第3回：「スマホサイトで指定すべき最適なフォントサイズとは？」 第4回：「スマホサイトの「続きを読む」は必要か？」 第5回：「スマホで読まれる文字数は？」 第6回：「記事をページ分割するメリット・デメリット」 それでは第2回、いってみましょう。 フォントの設計にある程度の正解は存在する ウェブは誰のものでもないので、良くも悪くも「このルールに従って作りなさい」

こんにちは、内藤です。 先日デザイナーの富川がお伝えしたように、シナップでは、ビジネスを成長させ続けていくために、様々なテーマに沿って知見を深めていく事例研究グループが誕生しました。 富川はエンジニアの野原と組んで、EFO（スマートフォンの入力フォーム最適化）についてのリサーチを行っている一方、私はディレクターの三国と組んで「モバイルフレンドリー」についてのリサーチを行っています。 これから私たちも、実践的な内容で連載を行っていきますので、どうぞお楽しみに。 <SINAP モバイルフレンドリー対応 連載> 第1回：「スマホで読まれる文章とは？」 第2回：「GoogleとAppleの推奨フォントは？」 第3回：「スマホサイトで指定すべき最適なフォントサイズとは？」 第4回：「スマホサイトの「続きを読む」は必要か？」 第5回：「スマホで読まれる文字数は？」 第6回：「記事をページ分割するメリッ

こんにちは！デザイナーの富川です。 突然ですが、SINAPでは先日、ビジネスを成長させ続けていくために、様々なテーマに沿って知見を深めていく事例研究グループが誕生しました。 今回はエンジニアの野原と私で「スマートフォンの入力フォーム最適化」について調査を進めています。 これからますます重要視されていくスマホの入力フォームについて、実践的な内容を連載していきます。連載記事となっていますので、ぜひあわせてお読みください。 <スマホ入力フォーム最適化 連載> 第1回スマホEFO：「スマホ入力フォーム最適化を始めよう！」 第2回スマホEFO：「入力フォーム最適化に必須の9つのルール」 第3回スマホEFO：「EFO対策に必要なデータとは？入力フォームの数値取得方法まとめ」 第4回スマホEFO：「Googleアナリティクスのイベントトラッキングを使って行う入力フォーム最適化」 第5回スマホEFO：「E

こんにちは、池田です。 前回に引き続き、シナップの仕事について、エンジニアの関わり方の観点からご紹介します。 始めに大事なことを言っておきますと、エンジニア含め新しいメンバーの募集要項はこちらです：https://sinap.jp/recruit/entrance-requirements.html シリーズでお伝えしているので、その他の回は以下のリンクからどうぞ。 <シナップエンジニアのおしごと紹介シリーズ> 第1回：「【星海社サイト編】シナップエンジニアのお仕事紹介」 第2回：「【モリサワ TypeSquare編】シナップエンジニアのお仕事紹介」 第3回：「【自社プロジェクト編】シナップエンジニアのお仕事紹介」 事例紹介 モリサワ TypeSquareの場合 今回はモリサワ様のTypeSquareの事例です。 モリサワ様は、ウェブ業界ではフォントメーカーとして非常に有名ですが、Type

こんにちは、エンジニアの村山です。 社内のエンジニアから「MTって最近なんか色々出てるけど、違いがよくわからん。」と言われてしまいました。そうですね、私もよくわからんです。 わからん事は調べましょう。というわけで調べてまとめてみました。 前段、MTとは 何度かこのブログでも取り上げてますが、CMSツールのMTこと「Movable Type」。シックス・アパート株式会社が提供しているコンテンツマネジメントシステムツールです。 古くはブログツールとして提供されていましたが現在はサイトコンテンツマネジメントに力を入れており、大規模なウェブサイト構築にも力を発揮しているウェブサイトの裏方です。オブジェクト化されたコンテンツの管理と、MTMLというHTMLライクな独自タグを用いたテンプレートエンジンで業種を問わず様々なウェブサイトで利用されています。 最近ではAPIを設ける等してWebサイトに捕われ

エンジニアの池田です。 シナップでは現在、Webエンジニア、テクニカルディレクターを募集しています。 と、突然言い出しても、シナップのエンジニアがどんなだか、まるで分かりませんよね。そこで今回から、できれば何回かに分けて、仕事の内容などをご紹介していきたいと思います。 はじめに まずはじめに、この連載でお伝えしたいまとめを書いておきます。 シナップでは、エンジニアを含む各職種メンバーを募集しています（採用情報） シナップのエンジニアは、クライアントと直接検討しながら納得のいくまで制作します <シナップエンジニアのおしごと紹介シリーズ> 第1回：「【星海社サイト編】シナップエンジニアのお仕事紹介」 第2回：「【モリサワ TypeSquare編】シナップエンジニアのお仕事紹介」 第3回：「【自社プロジェクト編】シナップエンジニアのお仕事紹介」 事例紹介 星海社の場合 さて、さっそく事例紹介の話

こんにちは、池田です。 当日html5j電子出版部として登壇した松島、前回レポート記事を書いた久保田同様、わたしも1月25日のHTML5 Conferenceに参加して来ました。 聴いた講演の中でRobin Berjonさんの「HTML Next Is You」というセッションがおもしろかったので、英語のセッションで全てを理解できたわけではありませんでしたが感想を書いてみたいと思います。 このセッションで取り上げられたのは、Open Web Platformという概念でした。 これは、HTMLやCSSといった業界標準を策定するプロセスを見直し、ウェブをもっとオープンにしていこうという概念、運動です。 現在、ウェブは既にオープンです。誰でもコンテンツを公開することができ、それを見ることができます。コンテンツを作るための技術—HTML、CSS、JavaScrpit、ウェブサーバー......—

エンジニアの服の色はエンジとグレーが多い!? 1ヶ月間こっそりシナップメンバーの服の色を観察してみた記録！ みなさんこんにちは！デザイナーの富川です。突然ですが、みなさん毎日の洋服ってどんな風に決めていますか？その日の気分やTPO、色柄の好みなど、いろんなことを朝の一瞬で考えて選んでいるのではないでしょうか。 シナップでは月一回のランチ勉強会を開催しており、エンジニア・ディレクター・デザイナーの3チーム交代制で自由にテーマを決めて、趣向を凝らした内容を発表しています。（この時はいつも厳選されたおいしいお弁当をいただけます！） 昨年9月のデザイナーチームのテーマは「カラーについて」でした。その時「身近な色」という内容で、1ヶ月間シナップメンバーの服の色をこっそり記録し続けたのですが、それがちょっとおもしろいので、遅ればせながらその内容をお伝えしようと思います。 まずは、1ヶ月間のストーカー。

こんにちは！梅雨明けが待ち遠しいデザイナーの飯山です。今回はプロトタイピングツールの実践についてご紹介します。 開発の早い段階で動作するモデルを制作していく手法であるプロトタイピング。高解像度化するディスプレイへSVG画像活用のアプローチ。 Web制作においてこれらの動きが起きている中、デザインフェーズでも常に変化に対応していくことが求められます。私は普段Photoshopを使ってページデザインやUI制作をする事が多いのですが、他の有用なデザインツール検討もその１つではないかと思います。 先日参加したCSS Niteセミナー「プロトタイプ制作に使うSketch/Framerで動くモックアップ」について学んだ内容を元にお届けします！ Sketchは以前より一部の制作者の間では使われていたデザインツールですが、AdobeからFireworksの開発終了アナウンスのあった2013年5月を期に、こ

こんにちは。デザイナーの飯山です。日に日に暖かくなり桜もほぼ満開となると花見がしたくなりますね。 先日CSS Nite LP, Disk 33「UI/UX」が開催され、初めてのCSS Niteに参加してきました。今回は、「UI/UX観点で知っておくべきプロトタイピングの極意」と題して講演で印象に残ったフレーズをピックアップしつつお伝えしたいと思います。 セッション概要 UI（ユーザーインターフェース）とUX（ユーザーエクスペリエンス）をテーマに以下のセッションが行われました。何たる豪華な顔ぶれ...。 ブリッジビルダー (Bridge Builder) 坂本 貴史　ネットイヤーグループ株式会社 UIデザインのパターン化と効果的な実践方法 池田 拓司　クックパッド株式会社 アプリケーションのイディオムデザイン 上野 学　ソシオメディア株式会社 人間だからこそできる、気配りデザイン 〜ユーザー

開発者向けにOGP設定等をまとめてチェックするブックマークレットを作成しました。先輩の柿内が以前にも「OGPタグ確認に便利！ブックマークレットで手早くチェック」という記事でブックマークレットを公開していますがあれのパクr・・・もとい、リスペクトした拡張版みたいな物です。 ソースは一から全て書きましたので、後継版とかバージョンアップではなく、全く別ものとなっております。 なぜこれを作ったかというと、以前の物も機能は十分だったのですが「ページ数が多くなると確認が面倒くさい」といういかにもダメなエンジニア思考(ディレクターさんにも同意を得ましたが)に依ります。一回で全部チェックできたらよくね？っていう事で作りました。 このOGPチェック/サイトマップローダーは動作したウェブページのsitemap.xmlを取得し解析、記載される全てのURLを読み込んでOGPタグ等の設定をチェックします。特性上大量

JSだけで楽器を造る?! Web Audio API - SINAP Christmas Project 2013 - こんにちは。柿内です。 さて、クリスマスも近くなりSinap Christmas Project 2013の制作も佳境を迎えています。 （プロジェクトリーダーの私は胃が痛いですが、、、、） 前々回はLeap Motion、前回はiPhoneとセンサーデバイスの記事を掲載しましたが、今回はセンサーの動作に合わせて鳴らす音、「Web Audio Api」のお話をさせていただきます。 詳しいお話をするまえに、Web Audio APIを利用して簡単なデモをつくってみましたので、それを御覧ください。 「バンザイ」ピアノ ※この記事のデモではWeb Audio Apiを利用しています。Web Audio Apiをサポートしているブラウザ(Chrome,Safari,Firefox,

こんにちは、オペレーションエンジニアの池田です。 前回ご紹介した今年のクリスマスプロジェクトについて、まずはじめにご紹介するのは、わたしが担当したLeap Motion Controller（Leap）についてです。 Leapとは? Leapについては九月の記事（SINAPは話題のモーションセンサー Leap Motion に取り組んでます！）でも触れましたが、手、指の動きを読み取ってパソコンに入力として送ることができる、小さな箱型のデバイスです。 モーションセンサー自体は色々とありますが、Leapの特徴は 安い。1万円ほどで買うことができる。 手軽。パソコンにUSBで繋ぐことで使える。 小さい。3センチほどなので場所を取らない。 というところにあります。これを見ると、広まっていく下地は出来ているので、マーケティングやプロモーションに期待したいところです。 以前の記事では使い方を自由に考え

iPhone / iPad / iPod ユーザのみなさんは、もうかなりの方々が iOS 7 を使いはじめていらっしゃるのではないかと思います。 OS 全体の雰囲気もがらりと変わりましたが、アプリケーションひとつひとつにも様々な変更が加わっていて、ぼくも、とくにウェブブラウザの Safari に注目して調査をしているところです。 あたらしい Safari は、UI の大きな変更に加え、現時点ではほかのブラウザはまだ対応していない、あたらしい技術をつかったウェブコンテンツを扱えるようになっています。 今回は、Safari があらたに対応した技術のうち、CSS でリッチなテキストレイアウトを表現できる Regions と Shapes を用いたサンプルをつくってみました。どうぞご覧ください。

こんにちは、シナップの小茅です。 夏ド真ん中、蒸し蒸しした暑い日が続いていますね。 外でアクティブに行動するもよし、家で涼しみながらのんびるするもよし。 どちらにせよ夏は特に様々なシーンでスマホアプリにお世話になる機会が多いのではないでしょうか。 アプリを初めて立ち上げた際、アプリの機能紹介や操作説明などのチュートリアル画面をよく見かけますが、その方法は様々です。 ちょっとしたアプリ紹介とあわせて、ポイントとなる機能や操作説明を押さえたもの、美しいデザインのものなど、いくつかのチュートリアル画面をピックアップしてみました！ お金を扱うアプリだから信頼と安心がないと使えません。 Moneytreeのチュートリアルではその2つをうまくクリアしているなと思いました。 説明が多くなってしまいそうな商材ですが、機能のポイントをうまく抽出して横スライドで見せています。

おはようございます・こんにちは・こんばんは。 フロントエンドと電子出版担当の松島です。ここではたいへんおひさしぶりです。 先日、「BiB/i（ビビ）」という少し変わった EPUB リーダを無償公開しました。先週末にはバージョンアップも公開しています。（ちなみに SINAP のではなくぼく個人のプロジェクトです） 「ウェブサイト設置型 EPUB リーダ」と説明したりするのですが、特徴は次のようなものです。 ウェブページやブログ記事に YouTube 動画を貼り付ける感覚で EPUB を公開すればその場で読んでもらえる 100% JavaScript で書かれていて、ブラウザだけで動作する EPUB 3 に積極対応 ウェブらしく？、すべてのブラウザで同じ表示を目指すのではなく、各ブラウザの実装度に応じてそれぞれの最善で表示する。 スクロール操作を基本にしつつ、ページめくり風味のインタフェイスも