Apple reveals how it's made the iPhone 16 series (much) easier to repair

「誰のためのデザイン?」の旧版と改訂・増補版を読みました。 以前に旧版を読んだのですが、その記憶もあやふやなくらい前だったので、あらためて読み直し、その面白さゆえに改訂・増補版も購入してこれも読み終えました。 Web システム開発を生業としているので、日々ユーザとのインタラクションが発生するプロダクト開発に関わっているわけで、ユーザがどのように製品を認知し、使うかという内容は参考になりました。 それとは別にソフトウェア開発という観点で、ソースコードを読む時に人がどのように認知するのかという点でも興味深いものでした。このエントリでは、自分なりに整理したソースコードと概念モデルについて残しておきます。 ソースコードとメンタルモデル ソースコードの概念モデル 実行モデル プログラマモデル ユーザモデル 誰のためのソースコード? さいごに メモ ソースコードとメンタルモデル ある程度、経験のあるプ

概要 チームによる継続的開発を前提としたコーディングのガイドライン。 特定の言語を対象としたものではないが、主に静的型付けのオブジェクト指向言語を想定している。 サンプルコードは別段の定めがなければSwiftで記載。 ガイドラインの目的 生産性を高め、メンテナンスコストを下げる バグが生まれづらくする 開発メンバー（特に新規参加者）がコードを理解しやすくする 初心者プログラマーの教育 内容の説明 タイトルの頭についた【数字】は重要度。 高いほどシステムに与える影響が大きいが、低いものの方が影響が小さく改修しやすいものが多い。 【5】変数のスコープを小さくする 変わり得る値は複雑さを生み誤解やバグに繋がるため、プログラムは変数が少ないほど問題が生まれづらい。 プログラミングの大原則として、変数は必要最低限を心がけ、むやみに増やさないようにする。 また、変数はスコープや寿命が大きいほど悪影響が

今年の6月から勤務日数を減らし、3日をベイジ、1~2日を事業会社、その他の時間をフリーランスとして働いている。いずれも業務の内容としては、web制作に関わる内容で、ベイジとフリーランスは実装のみ、事業会社はデザインから実装までを担っている。 複業という働き方だが、最初から考えていたわけではない。私はベイジに新卒として入社したため、他の企業を知らない状態だった。そのため、他の企業も見てみたい、これまでとは異なる業界の方とも関わりたい、自分のスキルがどこまで通用するのか知りたい、といった欲求が生まれ、フリーランスか転職を検討していた。 その際に、いろんな人に相談する中で、今ある環境を生かしつつ、他を見て回ることができるとよいのではないか、という考えに至り、ベイジの協力もあり、複業という形をとることにした。 特殊な働き方ではあるが、自分なりに感じたメリットとデメリットをあげてみる。 メリット 複

ベイジに入社して、もうすぐで2年目が終わる。案件を重ねていく中で、トップページのデザインを作るときに、多くの失敗と学びがあった。その経験から、習慣化したことがいくつかあるので、まとめてみようと思う。 1. ラフを書いてから手を動かす ベイジでは、デザイナーがwebサイトの各画面のワイヤーフレームを作成する。その際、ディレクターと認識を合わせるため、手書きのラフを書くことがある。 以前は、いきなりデザインを起こしていたのだが、1ページ作り終えた際に「全体のバランスが悪い、レイアウトが単調でメリハリがない」と指摘されることがあった。そこで、ワイヤーフレームを作成するときと同じように、デザイン着手前もラフを書くようにした。 すると、事前に全体像を俯瞰して見ることができるので、セクション間のバランスやレイアウトを確認できる。このときに違和感があると、絵に起こしても上手くまとまらないことが多い。慣れ

以前、自分が意図した通りに仕事が終わらないことが多く、そうしたところ時間管理方法についていくつかアドバイスをもらったので、3つほどご紹介します。 1. タスクを細分化する ベイジでは、Googleカレンダーでスケジュール管理をしている。プロジェクトが開始すると、WBSと呼ばれる各作業が細かく定義されたものが共有され、ディレクターはメンバーの予定を仮押さえし、私はタスクを細分化してカレンダーへ落とし込む。 例えば、「ベースデザイン×10日」とあっても具体的な作業内容が見えないので、サイトストラクチャーを見て「トップページ」「特長ページ」など作るべき画面をカレンダーに入れていく。社内でフィードバックをもらうなら「フィードバック対応」と時間を確保し、バッファも見込んでおくと、スケジュールと乖離しにくくなった。このように、仕事を細分化すると 自分のやるべきことが可視化される 進捗が遅れているのか進

業務で分からないことがあり、人に質問するのは当然だが、もっとよいアイデアがありそう、と考えアドバイスを乞うことも大切だ。なぜなら自分がその分野のすべてを知っているわけではなく、他の人しか知らない知識もあり、その知識を借りることでさらによいアイデアが見つかるかもしれないからだ。 今日、プログラミングでつまずくところがあり、解決策を1つ見つけたものの、それがベストと思えず後輩のエンジニアに相談した。すると、私が考えていたものとは全く異なるアイデアを得られ、そのアイデアをふまえて複数の角度から考えることで、最初よりもよいコードになった。 業務に慣れていないうちは、何らかの問題に出くわしたとき、自分の能力の範囲で物事を考え「できない」「わからない」と否定の結論を急ぎがちだ。確かに、現在の条件だと解決が難しい問題というのはある。だが、工数を伸ばせばできる、他者を巻き込めばできる、など、条件を変化させ

webサイトのコンテンツのひとつに「写真」がある。制作フェーズにおいては、写真素材サイトを利用する場合と、撮影をしてオリジナル写真を作る場合の2パターンに分けられる。私が最近担当している製品サイトでは、撮影をして利用イメージを作ることになった。 撮影場所は、ハウススタジオと呼ばれる住宅設備が充実した一軒家。スタジオはネットで検索していたが、やはり自分の目で、自然光の入り具合や家具・小物の状況など確認したいことはいくつかあった。そこで、ロケハンと呼ばれる撮影地の下見に行ってきた。 初めての経験することもあったが、一緒に参加したカメラマンから「デザイナーは、こういうポイントを抑えるいいよ！」とか「別案件ではこういう進め方もあるよ！」と親切に教えていただいた。その内容からロケハンを通して、気をつけたいポイントを3つにまとめてみた。 1. クライアントの意図も踏まえたコンセプト作り 以前先輩から、

ベイジには職種としてのコピーライターはおらず、主に戦略フェーズから携わるプロデューサーやディレクターがコピーライティングを担当している。しかし、デザイナーやエンジニアでも制作中のコピーに違和感があれば改善要望をあげるべきだし、また自身でもコピーの良し悪しを判断し、修正するスキルを高めるべきだろう。 webサイトにおける価値の中心はコンテンツであり、その中でも図版や画像ではなく、テキスト情報の質が重要な役割を担っている。フロントエンドエンジニアである自分は、ボディーコピー自体を作成する機会は少ないものの、CTA（コール・トゥ・アクション）やボタンの文言、入力フォームのラベル、エラーメッセージなどを「このコピーでユーザーに伝わるか？」「行動を起こして貰えるか？」という観点から修正することが多い。 これらは、「マイクロコピーライティング」と呼ばれており、コンバージョンボタンや会員獲得への誘導、メ

最近はSNSの普及に伴い、デザインに対して正直どう感じるか？という意見を、デザインに詳しくない人でも気軽に発言しやすく、かつ可視化されやすい環境になった。またそうなったことで、デザイナーがある種「専門領域に口出しするな」という暗黙の空気を出すことは、信頼を失うことに繋がりやすい世界になったのではないだろうか。 例えばデザインの意図を説明する際、人によって解釈が異なる内容を、デザイナーが論理的な根拠もなく、いかにも素晴らしいものであるかのように説明するのは、デザインを知らない、またはデザインという専門領域には口を出しにくいと感じる人に対して誠実な対応とは言えない。 デザインの説明では、意図だけを伝えること、感じ方まで決めつけないこと、この2つが大切になると心得ておくのが良いだろう。 意図だけを伝える まず作成したデザインを提示した上で、ユーザーはどんな特性を持っているか、そこに対してクライア

日本の電子決済と異なり、中国のQRコードスマートフォン決済「アリペイ」「WeChatペイ」は、加盟店手数料などが原則不要だ。それでなぜ利益を上げられるのか。今日頭条が報じた。。 踏んだり蹴ったりの電子決済 日本で電子決済が広まらない理由。それは手数料だ。加盟店は一般的に3％から5％程度の手数料を支払わなければならない。お客さんが1000円のランチを食べても、電子決済で支払われたら、実質の実入りは950円で、50円は決済運営企業に支払わなければならない。 これは、ギリギリのコスト、ギリギリの利幅で経営している小規模飲食店にとって、かなりきつい。電子決済をする客が増えてきたら、値上げをせざるを得なくなり、値上げをすれば客数が減り、客数が減れば売り上げが下がるという悪い循環に入ってしまうのではないかという恐怖がある。 そのため、飲食店では、電子決済に対応していることを積極的にアピールしないことも

私は数年前まで編集の仕事に携わっていたが、中でも文書や資料の校正作業は胸を張って得意だといえる技能かもしれない。小学生の頃から国語辞典や漢和辞典、地図帳を眺めるのが好きで、本や教科書などに誤字脱字を見つけると、訂正の書き込みをするのが癖になっていた。我ながら細かく、執拗と感じるほどだった。 校正を覚える学校や通信教育もあるが、自分は仕事の中での見よう見まねと編集者用の参考書（校正のやり方、赤字の入れ方や校正記号等が書いてある）で覚えた。これまでこの校正作業について体系的に振り返ったことがあまりないので、少し書いてみたい。 4つの校正作業 文字や文章のチェック作業に関しては「校正」「校閲」「推敲」「査読」などいくつか種類があり、それぞれ意味合いが微妙に異なっている。 「校正」は、誤字・脱字や文法など、文章の表面上の間違いを正すこと。 「校閲」は、文字・文章の意味を読み込み、事実確認をし、文脈

Webサイトを訪問したユーザに対して、商品やサービスへの問い合わせや商品の購入といったコンバージョンを上げるためには、行動を促すためのCTAの設計がとくに重要になります。この記事では、質の高いCTAを作成する上で注意するべきポイントをご紹介します。 CTAとは なぜCTAが必要なのか？ CTAを作成する際に押さえるべき8つのポイント デザイン・色 1）ボタンは大きく配置し、周囲に埋もれない目立つ色にする 2）動きを取り入れて、情報量が多くても見落とさせない 3）問い合わせの相手をイメージさせて安心感を与える 視線・動線 4）ページ内のストーリー構成に沿って行動を促す 5）コンテンツを読む目線を邪魔するように配置する コピー 6）ユーザに取ってメリットがあると具体的に伝える 7）「心配しなくていいですよ」と不安を払拭する 8）手間や時間がかからないことを明確に伝える まとめ CTAとは 「C

大量のHTMLにtitleやdescriptionを反映する機会があり、試しに一括で反映可能なスクリプトを書いてみました。 #実現できること ・エクセルに記載されているtitleやdescriptionを抽出し、該当するHTMLファイルに一括反映 ・og関連やcanonicalタグなど、ページ固有の設定の一括反映 #サンプルのディレクトリ構成 root / ├ public / ├ config.xlsx ├ package.json └ head.js public 〜 html/css/jsなどの公開用のディレクトリ config.xlsx 〜　title、meta情報を記載したエクセル head.js 〜　エクセルファイルを解析し、htmlファイルに反映するスクリプト #実装について node.jsを使用し実装します。 使用するモジュール xlsx cheerio 以下コマンドでイン

この3月から2018年度の新卒採用が本格化し、各企業の採用サイトが公開されています。 ここ数ヶ月間で進行していた採用サイトが先日に公開されたこともあり、Web制作会社のディレクターという立場から、制作する上で注意するべきポイントなどをまとめてみたいと思います。 採用サイトの目的は、質の高いエントリーを増やすこと 採用サイトは、企業の採用戦略上の課題を解決するための手段の一つであり、自社の戦略に適合する学生に認知してもらい、エントリーや説明会への参加といったアクションを起こしてもらう必要があります。採用戦略の目的としては、「求める人物像の学生を採用すること」になりますが、採用サイトでの目的は、「自社が定義する質の高い学生からのエントリーを増やすこと」になります。 新卒学生を対象とした採用プラットフォームとしては、リクナビやマイナビといった就活ポータルサイトが存在し、興味がある企業情報を閲覧し

デザイナー向けに書かれたユーザビリティの書籍や記事はたくさんありますが、実装者向けはあまりありません。そこで、これまでに私が実装をして、デザイナーに受けた指摘、配慮すべきと感じた点を中心にまとめてみました。 リンク・機能など 1. リンクや押せる箇所は気づいてもらえるようにする 便利な機能を実装しても、気づかれなくては意味がありません。リンクや押せる箇所などは、色が変わる、動くなどの変化を加えてユーザに気づいてもらえるよう配慮しましょう。 プロバスケットボールリーグ、Bリーグのサイト。タブですが、マウスオーバーしてもポインターが変わらず、反応もないので押せることに気づかないユーザもいるのではないでしょうか。 2. 画面最上部へ戻るボタンの設置 特に読み物系のサイトなど、画面が長くなる場合はページトップへ戻るリンクがあると便利です。スクロールで戻るのは意外と大変で手間がかかります。PCはブラ

私は25歳の時に異業種から、Web業界に入りフロントエンドエンジニアになりました。 職業訓練校やスクールに通わず、知識ゼロの状態からフロントエンドエンジニアになるために行ったことや転職活動で使った求人サイト、面接で気をつけたポイントや意識したことをまとめてみようと思います。 これからフロントエンドエンジニアを目指している人、異業種からWeb業界への転職・キャリアチェンジを考えている方の参考になれば幸いです。 そもそもフロントエンドエンジニアとは 一般的にフロントエンドエンジニアとは、HTML/CSS/JavaScript/PHPなどを利用しWebサイトやWebアプリケーションの見た目や操作する部分を構築する人を指します。HTMLコーダーやマークアップエンジニアとの違いは、HTML/CSSの設計がメインの前者に対し、マークアップエンジニアはJavaScriptやPHPの実装、CMSや各種AP

2015.3.28 Atomで言語別にインデントのルールを設定したい。以前は言語別でソフトタブの設定ができたようなのですが、現在はできないようです。困った…。そんな時に出会った「EditorConfig」が便利でしたので、設定方法を紹介します。 現在、Atomのインデント設定は以下の様になっております。 言語別に半角スペースの数を変更できる ハードタブかソフトタブかを切り替えることができる 言語別にハードタブかソフトタブかを変更できない 以前は言語別でソフトタブの設定ができたようなのですが、現在はできないようです。 そこで、プラグインのsyntax-settingsを導入して設定を試してみるも、上手くいかず撃沈。 これは困った。 そこで、対応策を探していると、EditorConfigというものに出会いました。 EditorConfigとは プロジェクト毎にコーディングルールが異なったり、複

2015.3.28 Atomで言語別にインデントのルールを設定したい。以前は言語別でソフトタブの設定ができたようなのですが、現在はできないようです。困った…。そんな時に出会った「EditorConfig」が便利でしたので、設定方法を紹介します。 現在、Atomのインデント設定は以下の様になっております。 言語別に半角スペースの数を変更できる ハードタブかソフトタブかを切り替えることができる 言語別にハードタブかソフトタブかを変更できない 以前は言語別でソフトタブの設定ができたようなのですが、現在はできないようです。 そこで、プラグインのsyntax-settingsを導入して設定を試してみるも、上手くいかず撃沈。 これは困った。 そこで、対応策を探していると、EditorConfigというものに出会いました。 EditorConfigとは プロジェクト毎にコーディングルールが異なった

UIデザインを考えるうえで、その時々のトレンドを考慮することは不可欠です。しかし、ただ単に「トレンドだから」「今風になるから」という理由でトレンドを取り入れても、本当の意味で「良いデザイン」になることはありません。ここでは、UIデザインのトレンドの歴史から、技術的背景とUIデザインの関わり方を学びつつ、トレンドの正しい取り入れ方について解説していきます。 UIデザインの歴史 人がコンピューターを操作するためのユーザーインターフェース（以下、UI）は、テープやカードに打ち込まれた信号からコンピューターに出力させる、バッチインターフェースから始まりました。やがてより人が扱いやすいように、テキストを入力するコマンドラインインターフェースへと進化し、グラフィック性能の向上に伴い、1980年代以降はグラフィカルユーザーインターフェース（以下、GUI）が主流となっていきました。 1964年に登場したI