サクサク読めて、アプリ限定の機能も多数!
トップへ戻る
大谷翔平
hatsuka.info
5月28日に大阪で開催されたセミナーでちょこっと登壇してきました。 当日発表したスライドがこちら。 集客のためのインターネット活用とSNS講座 講演時間を勝手に30分と勘違いしていたのですが、実際には60分ということで、ギリギリまでバタバタしながら作りました。 イラストを描いてる余裕もなかったので、みんなだいすき、いらすとやさんをフル活用させていただきました。 Facebookのイメージ画像のところでは、ぱくたそさんの写真も使わせていただいてます。 登壇の内容について 内容的には、「Webサイトを作りましょう!」というお話ではなく、「運用が大事!」ということを伝えたくて作成しました。 私の周りでWeb制作をしてる人達も、口をそろえて「運用が大事」と言いますし、私自身も過去にサイトやブログを作ったものの全然更新してもらえず、「なんのためにつくったんだろう…」となったお仕事があったので、そうい
海外で作られた日本人用のパンフレットなどをみると、「日本じゃそんな使い方しないよ〜」というものを、ときどき見かけます。 欧文フォントを使うときに、ひょっとしたら、それと同じような恥ずかしいことを、自分でもしているかもしれません。 そんなときに恥をかかないように、今回は、「欧文の基本ルールについて」です。 スクリプト体 スクリプト体を大文字だけで組むのはNGです。 お店のロゴなどで、「ブラックレター」で全部大文字になっているものもあるようですが、それも本当はNGのようです。 そもそも、大文字ばかりだと読みづらいという話… 小文字は大文字に比べて、アルファベットごとに上下に飛び出していたりしていますが、これがポイントとなって、読みやすくなっています。 日本語で文章を読むときも、漢字を一画ずつ目を追って読むというより、だいたいの輪郭(単語などひとかたまり)で読んでいるかと思います。 高さが全部揃
制作会社に勤めていたけれど、ストレスでやめた人の話をちょいちょい耳にします。 そういう自分も過去に一度、ストレスが原因で体調不良になり一度退職してるので今日はそのことについて。 会社をやめたときの話 大学を出てすぐに入った1社目のときに体を壊してやめました。 会社辞めた後は無事復活できたので、そこまで酷い方ではなかったと思います。 ただ、風邪とか全然ひかなかいような健康児タイプだった分、体を壊したときのショックは大きかったです。 症状としては、頭痛、肋間神経痛(みぞおちと肋骨の痛み)が数ヶ月続いてる状態。 やめる直前には、夜寝つきが悪くなる+寝てもうなされて起きるような日々が続き、最終的には吐き気とめまいがとまらなくなり、全く仕事ができなくなったのでやめました。 今考えると、「頭痛が1ヶ月以上続いてる時点で休めばいいのに!」と思うのですが、当時はいっぱいいっぱいでちゃんとした判断ができなか
フィルター 「|」 をつけると、フィルター機能が使えます。 コメントをつける(c) <!--サンプル--> .entry>h1|c <!--展開--> <div class="entry"> <h1></h1> </div> <!-- /.entry --> エンティティ化(e) <!--サンプル--> .entry>h1|e <!--展開--> <div class="entry"> <h1></h1> </div> 1行で書く(s) <!--サンプル--> .entry>h1|s <!--展開--> <div class="entry"><h1></h1></div> BEMで書く(bem) <!--サンプル--> .block>.-element+.-element>._modifier|bem <!--展開--> <div class
最近お仕事でTweenMaxというJavascriptのアニメーションライブラリを使用する案件があったので、それについて書こうと思います。 TweenMaxについて 公式ページ Flashを使っていた人にはおなじみのライブラリのようですね。 サンプルページを観ていただければわかるかと思いますが、結構リッチな動きが可能です。 今までは簡単なものであればjQueryでアニメーションを書くことが多かったのですが、TweenMaxのほうが、シンプルに書けます。 また、docsの情報が結構しっかりしている上に開発者の人も結構、頻繁にアップしているのも魅力的の一つです。 今回は基本的な使い方もふまえ簡単なサンプルをあげてみたいと思います。 クラス 使用できるクラスは4つあります。 TweenLite TweenMax TimelineLite TimelineMax TweenとTimelineとがあ
最近のwebサイトは、トップのスライドショーや、1画面にドーンとメインビジュアルがあるものが当たり前になってきています。 メインビジュアルを作るのが苦手な私ですが、ある程度レイアウトのセオリーを知っておくことで、少しは苦手意識が払拭できるのかなと思っています。 ということで今回は、11のレイアウト手法を元に、参考サイトを33個ピックアップしてみました。 1.反復 同じモチーフを繰り返し置くことで、強調させる手法です。 サイズや色を変えてたり、コマ撮りっぽくすることで、リズム感が出ます。 商品やロゴ、人物など、なにか強調したいものを見せたいときに使えます。 Life is electric SAKUZAN|美濃焼のうつわ 作山窯 good design company 2.対比 2つ以上の要素を、同じ構図や分量で配置する手法。 情報に優劣をつけず等しく見せたいときに使えます。 webではメニ
ブログのリニューアルをするすると言って早1年…。 今年こそは…!ということで、お正月からちょっとずつリニューアル準備をしています。 テーマを作成するにあたって、_sとFoundationを使っているので、その備忘録もかねてブログにも書いていこうと思います。 WordPressのテーマ作成について WordPressのテーマを作るにアプローチの方法が3つあります。 1. スクラッチ 自分で一からPHP・CSSを書いていく方法 自由度は高いけど、その分PHPの知識が必要 2. 子テーマ すでにあるテーマを使って、編集していく方法 親テーマに依存されるというデメリットはありつつも、既存のものをベースとして使うので制作時間は短縮できる 3. スターターテーマ(_s) 最低限のPHPが実装されているテーマをベースに、編集していく方法 スクラッチと子テーマは前に制作したことがあるのですが、_sでは作っ
Sketch Advent Calendar 2016の23日目の記事です。 Sketchを勉強する機会を強制的に作ろう!と思い、アドベントカレンダーに登録したSketch初心者です。 まだお仕事ではSketchを使ったことはなく、現在は絶賛お勉強中です。 今回はSketchが気になってる、もしくは勉強しようと思ってる、初心者さん向けの内容で書いてみようと思います。 Sketchとは ベクター系のグラフィックツールです。 Fireworksが開発終了になり、IllustratorかPhotoshopに移行するか…となったときに救世主として出現。 以前Fireworksを使ってた人は、Sketch好きですって人が多いように思います。 Macの専用アプリで、インターフェースはKeynoteに近いです。 価格は$99で、日本円にして今だと1万円ちょっとくらい。 ライセンスがちょっと変わって、バー
SVG Advent Calendar 2016、2日目担当のまついです。 昨年もSVGの記事を書いたのですが、設定のあたりで力尽きてしまったので、リベンジ。 今回は簡単なサンプルを作ってみました。 See the Pen Merry Christmas! by matsui (@matsui) on CodePen. アドベントカレンダーということで、クリスマス仕様にしてみました。 時間の都合上、トナカイの足がすり足になってますが、スルーしてください。 今回、サンプルを作るにあたって、アニメーションさせたいけど、特に良いアイデアが思いつかなかったので、こちらのソースをパク…にインスピレーションを得て作成しました。 JSは使わず、CSSをごにょごにょして、背景がパララックスで動くようにしてます。 サンプルでは、横幅を100%に設定したため、ループしないようになってますが、横幅固定でイラスト
個人のタスク管理でTrelloを使ってたんですが、別の使い方でしっくりきたのがあったのでご紹介。 そもそもTrelloって? 簡単に言うと、「タスク管理ツール」です。 ToDo、Doing、Doneといったリストを作成し、そこにタスクとなる1枚のカードを追加・張り替えをして、タスクを管理するのがメジャーな使い方です。 最近のお気に入りの使い方 「その日のタスクリスト」、「読んだ本リスト」などのボードを作っていたのですが、一番便利だなと感じたのが「旅行用」で作ったボードです。 それまでは、手帳やEvernoteをメインに使っていました。 Evernoteはすごく便利なのですが、見やすく整形したり、友達と共有し合うのが面倒で、モヤモヤすることが多かったです。 それが、Trelloを使うことで、大分解消されました。 先日旅行に行ったときのボードの様子 旅行用ボードの場合は、 準備 1日のスケジュ
最近、Bracketsというエディタを使ってます。 PSDファイルの情報を抽出してくれるという話を聞き、それが目当てで使い始めたものの、他にもいいなぁと思うところがあったのでまとめてみました。 ちなみに、自分のエディタ歴… Dreamweaver → Coda → SublimeText → Atom → Sublime という感じです。 ※ 最近はほとんど使ってないですが、面倒なテーブルコーディングがある場合は、Dreamweaverを使うこともあります。 ※ 私はまだがっつりとは触ったことがないですが、Webstormか、PhpStormあたりもファンが多いですよね。 1.ライブプレビュー機能 デフォルトでライブプレビューがついてます。 右上にある稲妻アイコンを押すと、起動して開いてるファイルをChromeで開いてくれます。 ブラウザのデフォルトはChromeですが、Firefoxも設
flexboxについての続編です。 flex-growやflex-shrinkの設定方法でちょっとつまったので、今回もサンプルをいくつか用意してみました。 flex-basis 基準となる幅を指定できます。 親要素に対して小さい値を設定すると隙間はできますが、大きい値を入れても突き破ることはないです。 2段などにさせたい場合はflex-wrap: wrap;を指定すればいいのですが、その場合2段目以降は100%より小さくても親要素にぴっちりなります。 See the Pen GJBJdM by matsui (@matsui) on CodePen. flex-grow フレックスアイテムがフレックスコンテナ内で、余裕がある場合どれだけ大きくなるかの割合を指定できます。 See the Pen aOjyKR by apct (@apct) on CodePen. flex-shrink フ
flexboxプロパティってとても便利ですよね。 便利だなーと思うのですが、毎回使い方を忘れて使うたびにググってます…。 いい加減覚えよう!といういましめエントリーです。 フレックスレイアウト 今までレイアウトには ブロックレイアウト インラインレイアウト テーブルレイアウト 配置レイアウト がありましたが、フレックスレイアウトという、新しいレイアウトモードが誕生しました。 近年、アプリやWEBページが複雑なレイアウトをする傾向から、CSS3で新しく誕生したレイアウトモードです。 どういうときに使うの? 要素を左右上下と整列させたいとき 横並び要素の高さをそろえたいとき 要素を好きな順序に並び替えたいとき などなど、用途は様々です。 例えばこういう配置で高さを揃えたいときとか… sectionの後はh1を置きたいけど、上に画像がいるなーというときとか… See the Pen doejQa
3月5日、大阪で開催されたFRONTEND CONFERENCE 2016に参加してきました。 参加登録するときに、「エンジニア向けかな?難しすぎてついていけなかったらどうしよう…」とか思っていたのですが、サイトの方にデザイナーもWelcomeとあったので、思い切って参加してみることに。結論からいうと、参加してよかったです。 私が聞いたセンションが以下。 大型フロントエンド開発におけるTypeScriptとDDD gulp ベストプラクティス あなたの言葉で伝えるWebアクセシビリティ これからのデザインを考える グロースハックを実現する「モジュールデザイン」とCSS設計 大型フロントエンド開発におけるTypeScriptとDDD 最初から、なかなかハードルが高く、ほとんど理解することができなかったのですが、デザイナーとの連携の話の所などは、とても参考になりました。 デザイナーがSCSSを
先月の話になりますが、1月24日に「GPL勉強会」に参加してきました。 今回は、その復習もかねて、ライセンスについてあれこれ書いてみようと思います。 フリーの意味 WordPressはフリーのソフトウェアライセンスとして、一般の人にも広く知られています。 しかし、この「フリー」という言葉の意味を「無料」という風に、少し間違った解釈をしている人も多いのではないでしょうか。 ここでの「フリー」は「無料」のフリーではなく「自由」という意味でのフリーになります。 「著作権」と「ライセンス」との違い 「自由」とはいえ、制作物には、必ず「著作権」があります。 ここで、一度「著作権」と「ライセンス」の違いについて振り返ってみましょう。 大分ざっくりしてますが、個人的にはこういうイメージ…。
Illustratorでは奥が深いアピアランス。 今回は基礎編としてアピアランスとはなんぞやから書いていきたいと思います。 アピアランスとは オブジェクトの見た目をコントロールできる機能です。 アピアランス属性のは線 塗り 効果 不透明度があります。 何もいじってない状態のアピアランスウィンドウはこんなかんじ。 そして、アピアランスパネルの効果はこんなかんじ。 アピアランスを使うのメリット コツをつかめると、ペンツールで書くと難しそうなものも簡単に書けるというメリットはもちろんですが、一番大きいのは修正に強いオブジェクトが作れることかなと思います。 あとからでも修正が可能 後になってから、角丸の具合を変えたいという時なんかにも数値で変更ができるので便利です。 (ちなみに、アピアランスの設定を直したいときは、ダブルクリックで編集できます。) グラフィックスタイルに登録できる グラフィックスタ
印刷の通販グラフィック http://www.graphic.jp/ 低価格・品揃え豊富・24時間年中無休のサポートありの印刷屋さんです。 25部など少部数からの印刷も対応しているので、初心者の人にも安心ですね。 取り扱い:フライヤー・チラシ・ポスター・パンフ・冊子・はがき・名刺など プリントパック http://www.printpac.co.jp/ HPにデータの作成方法なども掲載されており、初心者でも気軽に注文できそうな印刷屋さんです。 印刷前の色校正もしてくれます。 会社は東京・京都・大阪にあるようです。 取り扱い:フライヤー・チラシ・ポスター・パンフ・冊子・はがき・名刺など レトロ印刷JAM http://jam-p.com/insatsu/ 孔版印刷の微妙な版ズレでレトロな印刷お楽しめます。 大阪の印刷屋さんでよくイベントも開催しており、わたしもワークショップや工場見学に参加し
SVG Advent Calendar 2015 10日目の記事です。 先週も別のAdvent Calendarに参加していたのですが、先月参加したリクリイベントでSVGについてちょっと勉強したこともあり、こちらのカレンダーにも参加してみることにしました。 今回はリクリで教わったことをベースに、データの作成からサンプル作成までの流れをざっくりと書いてみます。 SVGって? XMLをベースにした、ベクター画像フォーマットです。 ベクター画像なので、拡大してもきれいなため、高解像度端末でもきれいに見えます。 対応環境 IE9~、Android3~で対応しており、その他のブラウザも最新版であれば問題なく表示されます。 (ちなみに、ChromeよりもIEの方がSVGのレンダリングがきれいだそうです。) 埋め込み方 埋め込み方は大きく見ると4つほどあります。 1.img要素としてHTMLに埋め込む
このページを最初にブックマークしてみませんか?
『hatsuka – Just another WordPress site』の新着エントリーを見る
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く